Question

我一直遇到类似的问题，所以我必须不完全了解React的生命周期。我已经读了很多，但是仍然无法在我自己的示例中弄清楚工作流程。

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

我已经尝试过使用componentDidMount和shouldComponentUpdate来接收道具，但是我似乎仍然无法使用道具。它总是只说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状态，但是它永远不能真正置位setState，因为在我的代码中，props尚未定义。但是，道具在所有负载加载之后就在那里。

很显然，我是React的新手，所以对任何指导都表示赞赏。谢谢！

Answer 1

React多次渲染您的组件。因此，您可能会在第一次渲染该道具并且尚未填充道具时看到错误。然后，一旦它们在那里，它就会重新渲染。

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

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

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

componentDidMount也很早，请尝试componentDidUpdate。但即使在那儿，也要确保您的道具在场。

供参考：请参见react's component documentation

当我需要道具时，为什么我的道具无法使用？

1 个答案: