Question

constructor(props) {
    this.state = {contents: []};
}

componentDidMount() {
    var self = this;
    console.log('> Manage mounted');
    ServerService.getServers(
        Parse, 
        self.props.parentState.state.activeAccount,
        (error, results) => {
            if (error) {
                throw new Error(error); 
            }

            this.setState((prevState, props) => ({
              contents: results 
            }));
        }
    );
}

您好，我上面有这个代码。我有一个名为Manage和Servers的组件。现在，从安装Manage组件开始，我想通过ServerService.getServers()填充它的this.state.contents。该实用程序返回results，它是来自回调函数的数组。虽然，状态还没有进入。这是从回调函数中更新组件状态的正确方法吗？

此外，我将所述状态传递给名为MainContent的子组件，例如<MainContent contents={this.state.contents} />，并在安装组件时将其视为道具

componentDidMount() {
    console.log('> MainContent is mounted');
    console.log(this.props.contents);
}

问题是，来自this.props.contents组件的MainContent仍为空白数组。我这样做的原因是因为我在contents中进一步使用了值，作为props子组件的另一组MainContent。

Answer 1

当您尝试更新类似

的状态时，用于更新状态的方法很有用

    this.setState((prevState, props) => ({
          contents: [...prevState.content, props.content]
        }));

即使用之前的state以及props，因为this.props和this.state可以异步更新，所以不应该依赖它们的值来计算下一个状态。

但是你在一个函数中使用了setState，因此this关键字在这里不能引用正确的内容，你也应该使用self，因为你用一个更新状态不依赖于状态或道具的值，因此您可以使用更新状态的直接方法，如

self.setState({contents: results});

代码：

componentDidMount() {
    var self = this;
    console.log('> Manage mounted');
    ServerService.getServers(
        Parse, 
        self.props.parentState.state.activeAccount,
        (error, results) => {
            if (error) {
                throw new Error(error); 
            }

            self.setState({
              contents: results 
            });
        }
    );
}

就componentDidMount MainContent中的空白数组而言，您将获得一个平淡的数组，因为componentDidMount仅在初始渲染时呈现，因为在初始渲染时{{1} }是一个空白数组，你得到一个空值。

将其更改为this.state.contents

componentWillReceiveProps

无法在回调函数内更新组件的状态

1 个答案: