在 REACT 中将 props 传递给组件

Question

编辑：问题在于条件。 感谢你们！

我正在使用开源 API 设计一个 covid19 观察程序应用程序。 我注销 state 以查看它是否更新，确实如此，但是当我将 state 传递给组件时，它不会传递数据。

所以我在 render() 上设置了一个条件，似乎 state 没有更新，所以组件没有得到它。 可能是因为 componentDidMount 在 render 之后运行。 我如何解决它？

应用程序.js

 import React from 'react'; import Homepage from './pages/homepage/homepage.component.jsx'; import './App.css'; class App extends React.Component{ constructor(){ super() this.state = { statistics:{}, } } componentDidMount(){ fetch('https://api.covid19api.com/summary').then(response => response.json()).then(data => { const all_data = data; this.setState({statistics: all_data}); console.log(this.state); }) } render(){ const { statistics } = this.state; return.statistics?length: <div> Some text </div>; ( <Homepage statistics={statistics} /> ); } } export default App;

Answer 1

我相信这个问题与子组件无关。

ComponentDidUpdate生命周期方法确实在渲染后运行，但随着 state 的更新，它会触发渲染以使用新的 state 再次运行。

问题是你的条件。 由于 API 返回 object 而不是数组，因此它没有长度属性，因此您的条件始终为真并呈现<div> Nawa oh </div>元素。

您应该检查 state 是否为空 object 或者 state 是否有密钥

return statistics === {} ? 
        <div> Nawa oh </div> :
      (
      <Homepage statistics={statistics} />
      ); 
// Or a better way to check if statistics has keys
return Object.keys(statistics).length ? (
      <Homepage statistics={statistics} />
      ) : <div> Nawa oh </div>;

Answer 2

statistics是 object，它没有length属性。 要检查您是否有statistics ，您可以在Object.keys上使用 Object.keys：

return !Object.keys(statistics).length ?

Object.keys(statistics)返回 object 键的数组，因此如果您的 object 为空，它将返回一个空数组

顺便说一句，在您的componentDidMount中，当您这样做时：

  this.setState({statistics: all_data});
  console.log(this.state);

setState 是异步的，所以 console.log 不起作用