来自 Flask 后端的道具没有传递给组件“TypeError: undefined is not an object (evaluating 'undefined.props')'

Question

放出大量代码，方便阅读。

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

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

我正在将App.js中的道具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 数据填充每个组件。

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

Answer 1

我发现this.props.data需要是props.data因为它不是一个类。