Javascript 如何在渲染前使用setState更新状态

首先，我要声明我是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>
    );
}

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
事物：[]
};
}
componentDidMount（）{
这是我的国家({
事情：[
{
状态：“正在运行”，
测试：“测试”
}
]
});
}
render（）{
返回(
{this.state.thing[0].status}
单击以更改
);
}

}

我知道setState在根据文档使用时不能保证更新。我还发现了“forceUpdate（）”，文档建议尽可能少地使用它。尽管如此，我还是试图使用它，但没有用

我能够在componentDidMount（）运行期间和渲染的h1元素中对新状态进行console.log，但我无法在渲染中实际显示它，因为它首先渲染的是一个空状态数组

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

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

---

听起来您希望

组件将更新
或
应更新组件
方法。
componentDidMount
在初始渲染后调用，因此在初始渲染时
此状态。对象[0]
未定义，因此会导致错误，在使用
this.state.thing[0]。status之前，需要执行条件检查

componentDidMount() {
    this.setState({
        thing: [
            {
                status: "running",
                test: "testing"
            }
        ]
    });
}

render() {
    return (
        <div>
            {this.state.thing.length > 0? <h1 className="mt-5 mb-5">{ this.state.thing[0].status }</h1>: null
}
            <button className="mt-5" onClick={ this.handleUpdate } value="not running">
                Click to change
            </button>
        </div>
    );
}

componentDidMount（）{
这是我的国家({
事情：[
{
状态：“正在运行”，
测试：“测试”
}
]
});
}
render（）{
返回(
{this.state.thing.length>0？{this.state.thing[0]。状态}:null
}
单击以更改
);
}
要回答您的问题，是的，有一种方法可以在初始渲染之前设置state，即使用
组件willmount
。它是在React中调用的第一个生命周期方法。生命周期方法
componentDidMount
在初始渲染后调用

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

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

谢谢你的回答，丹尼尔！我之所以使用componentDidMount来设置状态，而不是事先初始化它，是因为我正在调用一个API，并根据该调用设置状态。如果没有API，状态将是一个空数组，不会呈现任何内容。