Flask后端的支持未传递给组件'TypeError：undefined不是对象正在评估'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数据填充每个组件。

感谢您的帮助，谢谢。

解决方法

我发现this.props.data必须是props.data，因为它不是课程。