React中创建同长状态数组报错：'ingredients'未定义

错误原因 #

你在构造函数里初始化array时，直接写了ingredients.length，但这里的ingredients根本不是一个已定义的变量——此时你只是在给this.state添加ingredients属性，还没完成赋值，自然找不到这个变量。而且就算能访问，初始的ingredients是空数组，array也会是长度为0的数组，之后接口返回数据后它也不会自动同步更新。

修复方案 #

直接在接口请求成功后，同步更新array即可，这样能保证array的长度和返回的配料数组完全匹配：

修改componentDidMount中的代码：

componentDidMount = () => {
  axios.get("https://localhost:2000/toppings")
    .then((response) => this.setState({
       ingredients: response.data,
       array: new Array(response.data.length).fill(false)
    })).catch(err => console.log(err))
}

同时构造函数里的array可以初始化为空数组，避免不必要的错误：

constructor(){
  super();
  this.state = {
    ingredients:[],
    array: []
  };
}

补充说明 #

如果之后需要在ingredients变化时（比如用户手动添加配料）同步更新array，可以用componentDidUpdate钩子来监听ingredients的变化，再更新array：

componentDidUpdate(prevProps, prevState) {
  if (prevState.ingredients.length !== this.state.ingredients.length) {
    this.setState({
      array: new Array(this.state.ingredients.length).fill(false)
    });
  }
}

内容的提问来源于stack exchange，提问作者Real Prime