我一直在遇到类似的问题,所以我对 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 的新手,因此非常感谢任何指导。谢谢!
最佳答案
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 存在。
关于javascript - 为什么我的 Prop 在我需要的时候不能在我的组件中使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54608822/