javascript - React js 我应该如何处理在调用 componentDidMount() 之前使用的对象？

Question

我有以下 react 组件

    class GroceryContainer extends Component {
    constructor() {
        super();
        debugger;
    }
    componentDidMount() {
        fetch("http://localhost:333/Api/grocery") 
            .then(result=> {
                return result.json();
            })
            .then(data =>{
                debugger;
                this.setState({ Ingredients: data.Ingredients })}
            );
    }

    render() {
        return (    
        <div>
            <h2>Grocery List</h2>
            <GroceryItems ingredients={this.state.Ingredients}/>
        </div>);
    }
}

我得到错误

Cannot read property 'Ingredients' of null.

这似乎是因为我在获取数据之前使用了 Ingredients。我该如何防止这个问题？我只是在构造函数中初始化它吗？

Answer 1

您需要在构造函数中设置默认状态:

constructor() {
  super();
  this.state = {
    Ingredients: undefined,
  };
}

注意:只能在构造函数中这样设置初始状态。所有其他本地状态更新都应该通过 this.setState。