javascript - 为什么我的 Prop 在我需要的时候不能在我的组件中使用？

Question

我一直在遇到类似的问题，所以我对 React 的生命周期一定没有完全理解。我已经阅读了很多相关内容，但仍然无法完全弄清楚我自己的示例中的工作流程。

我正在尝试在子组件中使用 props，但是当我使用 this.props.item 引用它们时，我遇到了一个问题，即 props 是 undefined。但是，如果应用程序加载然后我使用 React Browser 工具，我可以看到我的组件确实获得了 props。

我已经尝试使用 componentDidMount 和 shouldComponentUpdate 来接收 Prop ，但我似乎仍然无法使用 Prop 。它总是只是说 undefined。

我在 React 中是否遗漏了一些可以让我更好地在子组件中使用 props/state 的东西？这是我的代码，可以更好地说明问题:

class Dashboard extends Component {
  state = { reviews: [] }

  componentDidMount () {
   let url = 'example.com'
   axios.get(url)
   .then(res => {
     this.setState({reviews: res.data })
   })
   } 

  render() {
   return(
    <div>
     <TopReviews reviews={this.state.reviews} /> 
    </div>
   );
  }
 }

 export default Dashboard;

然后是我的 TopReviews 组件:

class TopReviews extends Component {

state = { sortedReviews: []}

componentDidMount = () => {
 if (this.props.reviews.length > 0) {
  this.sortArr(this.props.reviews)
   } else {
    return <Loader />
   }
  }

sortArr = (reviews) => {
  let sortedReviews = reviews.sort(function(a,b){return b-a});
  this.setState({sortedReviews})
 }

render() {
 return (
  <div>
    {console.log(this.state.sortedReviews)}
  </div>
  );
 }
}

export default TopReviews;

我希望我的 console.log 输出 sortedReviews 状态，但它实际上永远无法设置状态，因为在我的代码中那个时候 props 是未定义的。然而， Prop 在一切加载之后就在那里。

显然，我是 React 的新手，因此非常感谢任何指导。谢谢!

Answer 1

React 会多次渲染您的组件。所以你可能会在第一次渲染时看到一个错误并且 Prop 还没有被填充。一旦他们在那里，它就会重新呈现。

解决这个问题的简单方法是有条件地呈现内容，例如

<div>
 { this.props.something ? { this.props.something} : null }
</div>

我也会尝试避免使用 React 生命周期回调。您始终可以在渲染之前进行排序，例如 <div>{this.props.something ? sort(this.props.something) : null}</div>

componentDidMount也很早，试试componentDidUpdate .但即使在那里，也要让你的 Prop 存在。

供引用:参见 react's component documentation