Question

我是React的新手，现在我已经遇到过这个问题了几次。儿童组件依靠他们的父母来获取某些道具，但由于某种原因，React在他们的父母面前渲染了许多这些孩子，创造了一个无操作。对我来说，为什么React会这样做没有任何意义，有人可以解释为什么会这样吗？

示例：

在App.jsx中我有：

<div className='container'>
    {this.state.loggedIn ? this.changeView() : <Landing />}
</div>

在render（）中，所以一旦用户登录，将触发changeView，返回<GroceryList user={this.state.user} />。这叫：

const GroceryList = (props) => (
  <div>
    <AddIngredients ingredients={props.user.groceryList} />
  </div>
);

然后调用其子AddIngredients，它依赖于props.ingredients在以下代码中呈现：

const IngredientList = [];

  for(let i=0; i<this.props.ingredients.length; i++) {
    IngredientList.push(<Ingredient
      key={i}
      index={i}
      value={this.props.ingredients[i]}
      handleDeleteIngredient={this.handleDeleteIngredient}
      handleUpdateIngredient={this.handleUpdateIngredient}
    />);
  }

当我第一次登录应用程序时，我收到错误Uncaught TypeError: Cannot read property 'length' of undefined，但是如果我刷新页面就可以了。

Answer 1

问题不是您在问题中提到的。问题是您尚未访问“ groceryList”的长度。您可以使用安全的导航方法解决此问题，也可以如下解决此问题：

const GroceryList = (props) => (
  <div>
    {props.user.groceryList && <AddIngredients ingredients={props.user.groceryList} />}
  </div>
);

但是，您可以使用多种语法，具体取决于您的代码和偏好。

为什么在父母面前让孩子回答？

1 个答案: