时间戳

首页 > 解决方案 > 来自 Flask 后端的 Prop 未传递给组件“TypeError：未定义不是对象（正在评估 'undefined.props'）”

javascript - 来自 Flask 后端的 Prop 未传递给组件“TypeError：未定义不是对象（正在评估 'undefined.props'）”

问题描述

为了便于阅读，发布了大量代码。

TypeError: undefined is not an object (evaluating 'undefined.props')

<PortfolioAssets data={this.props.data} onClose={function(event){ closeCard(); handleSnackbarClick()}} />

我正在App.js向DashboardView组件传递一个道具：

import {
  Dashboard as DashboardView,
} from './views';

function App() {
  const [response, setResponse] = useState("");

  useEffect(() => {
    const socket = socketIOClient(ENDPOINT);
    socket.emit('test', {"name": "jim"})
    socket.on("test_client", data => {
      setResponse(data);
    });
  }, []);

  const Routing = [
    {
      path: 'app',
      element: <DashboardLayout />,
      children: [
        { path: 'dashboard', element: <DashboardView data={response}/> },
      ]
    }
  ];

  const routing = useRoutes(Routing);

  return (
    <ThemeProvider theme={theme}>
      <GlobalStyles />
      {routing}
    </ThemeProvider>
  );
}

export default App;

然后我试着把道具拉进去DashboardView：

const Dashboard = (props) => {
  const classes = useStyles();

  const [showCard, setShowCard] = React.useState(true)
  const closeCard = () => setShowCard(false)

  return (
    <div style = {{padding: "2%"}} >
      <ResponsiveReactGridLayout
      >
        { showCard ? <div key="a" data-grid={{x: 0, y: 0, w: 1, h: 4, minW: 1, minH: 4, maxW: 4, maxH: 4}}>
          <PortfolioAssets data={this.props.data} onClose={function(event){ closeCard(); handleSnackbarClick()}} />
        </div> : <div key="dummy"></div> }
      </ResponsiveReactGridLayout>
    </div>
  )
}

export default Dashboard;

但我明白了'TypeError: undefined is not an object (evaluating 'undefined.props')'

我希望道具来自 Flask 后端（包含 JSON 数据），因此我可以使用 JSON 数据填充每个组件。

任何帮助表示赞赏，谢谢。

标签： javascriptreactjsreact-propsflask-socketio

解决方案

我发现this.props.data需要这样做，props.data因为它不是一门课。

推荐阅读