Блог

Выдано много кода для удобства чтения.

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

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

Я передаю prop из 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;
  

Затем я пытаюсь вставить prop внутрь 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')'

Я хочу, чтобы prop исходил из серверной части Flask (содержит данные JSON), чтобы затем я мог заполнить каждый компонент данными JSON.

Любая помощь приветствуется, спасибо.

Я обнаружил, что this.props.data это необходимо props.data , поскольку это не класс.