Question

我先说明我是React.js的完全初学者

我已经创建了一个项目示例，我正在处理我在componentDidMount（）中调用API的位置，然后获取一个对象数组，将其设置为状态。这是它的样子：

class App extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        thing: []
    };
}
componentDidMount() {
    this.setState({
        thing: [
            {
                status: "running",
                test: "testing"
            }
        ]
    });
}
render() {
    return (
        <div>
            <h1 className="mt-5 mb-5">{ this.state.thing[0].status }</h1>
            <button className="mt-5" onClick={ this.handleUpdate } value="not running">
                Click to change
            </button>
        </div>
    );
}

}

我知道根据文档使用setState时，不保证更新。我还发现了＆＃34; forceUpdate（），＆＃34;并且文档建议尽可能少地使用它。然而，我试图使用它，但无济于事。

我能够在componentDidMount（）运行期间和渲染的h1元素中调试新的状态，但是因为它＆＃我无法在渲染中实际显示它＃＆＃m; 39;首先渲染一个空状态数组。

我的问题是：有没有办法在我的程序运行渲染之前强制我的状态更新，以便我能够看到它，如果没有，我怎样才能看到我的新状态反映在JSX中？

旁注：我的JSX按钮中有一个onClick，但我已经放弃了，直到我能够在JSX h1中看到新状态

Answer 1

在初始渲染之后调用

componentDidMount，因此，在初始渲染时this.state.thing[0]未定义，因此会导致错误，您需要在使用{{1}之前执行条件检查}}

this.state.thing[0].status

Answer 2

要回答你的问题，是的，有一种方法可以在初始渲染之前使用setState，并使用componentWillMount。它是在React中调用的第一个生命周期方法。在初始渲染之后调用生命周期方法componentDidMount。

但是，查看代码时我不确定使用componentWillMount的用例是什么。不要在componentDidMount或componentWillMount中设置状态，只需在构造函数中设置默认状态即可。然后，您可以在初始渲染中获得所需的状态，并可以相应地更新事件，即按钮。

constructor(props) {
    super(props);
    this.state = {
        thing: [
            {
                status: "running",
                test: "testing"
            }
        ]
    };
}

Answer 3

查看其他React lifecycle methods

听起来你想要componentWillUpdate或shouldComponentUpdate方法..

如何在呈现

3 个答案: