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

我将在序言中声明我是 React.js 的初学者

我创建了一个我正在开发的项目示例，在该项目中，我在 componentDidMount() 中调用 API 并获取对象数组，并将其设置为状态。它看起来是这样的：

class App extends React.Component {
constructor(props) {
    super(props)
    this.state = {
        thing: []
    }
}
componentDidMount() {
    // Fake API
    const apiCall = () => ({
      data: "test"
    })

    // Fake call
    const data = apiCall()

    this.setState({
        thing: [
            ...this.state.thing,
            data
        ]
    })
}
render() {
    return (
        <div>
            <h1>{ this.state.thing[0].data }</h1>
        </div>
    )
}

}

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

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

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

componentDidMount在初始渲染之后调用，因此在初始渲染时调用this.state.thing[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>
    );
}