Question

我试图弄清楚如何将道具传递到与特定路线相匹配的组件。从下面的代码中可以看到，每次用户点击/items/:id时，我都会从URL中获得ID，并希望获得使用该ID访问数组的正确项目。

<Route exact path="/items/:id" render={(props) => {
    let itemId = parseInt(props.location.pathname.replace('/items/', ''));
       console.log(this.state.items[itemId].description);
       return <ItemDetail item={this.state.items[itemId]} />;

问题是，如果我运行这段代码，React将崩溃并返回愤怒的红色cannot read property description of undefined，但是-那就是我完全困惑的地方-如果我尝试登录this.state.items[itemId]，我会看到控制台中的完整对象。当然，如果我通过item作为道具，并尝试从子组件ItemDetail中获取描述，也会发生完全相同的事情。

您现在需要使用一种简单的方法在componentDidMount生命周期方法中设置数据

 componentDidMount() {
    this.setState({
      items: data
    });
  }

，React中断，但是如果我将其更改为即将弃用的componentWillMount，则该应用程序将按应有的方式运行，我不明白为什么。如果安装后已设置状态，并且我知道该项目存在于数组中（因为我可以记录该事实），为什么我不能读取其中的属性？

Answer 1

由于似乎正在componentDidMount中同步设置状态，因此您可以安全地将其移至构造函数以避免错误

constructor(props) {
    super(props);
    this.state = {
         items: data
     }
}

如果数据来自API调用，则您需要在componentDidMount中进行该API调用，并设置onsuccess或onerror回调的状态，并在render like中使用状态值时提供条件检查< / p>

return <ItemDetail item={this.state.items? this.state.items[itemId] : {}} />;

或显示加载，直到API调用成功

render() {
   if(!this.state.items) {
       return <div>Loading...</div>
   }
   return <Route exact path="/items/:id" render={(props) => {
    let itemId = parseInt(props.location.pathname.replace('/items/', ''));
       console.log(this.state.items[itemId].description);
       return <ItemDetail item={this.state.items[itemId]} />;
}

在componentDidMount中设置状态时，在React中访问已定义对象的属性时出错

1 个答案: