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

How to update state with setState before render

提问by Jacob Lockett

I'll preface this by stating that I'm a complete beginner at React.js

我将首先声明我是 React.js 的完全初学者

I've created an example of a project I'm working on where I call an API in componentDidMount() and get an array of objects back, setting it in state. Here's what it looks like:

我创建了一个我正在处理的项目示例，我在其中调用 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>
    );
}

}

}

I'm aware that setState isn't guaranteed to update when it's used according to the documentation. I also found "forceUpdate()," and the docs recommends to use it as little as possible if at all. Nevertheless, I attempted to use it, but to no avail.

我知道 setState 在根据文档使用时不能保证更新。我还发现了“forceUpdate()”，并且文档建议尽可能少地使用它。尽管如此，我尝试使用它，但无济于事。

I'm able to console.log the new state during the componentDidMount() run and in the render's h1 element, but I'm unable to actually show it in the render since it's rendering an empty state array at first.

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

My question is: Is there a way to force my state to update before render is run by my program so that I'm able to see it, and if not, how would I be able to see my new state reflected in the JSX?

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

Side note: There's an onClick in my JSX button, but I've given up on that until I'm able to see the new state in my JSX h1

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

采纳答案by Shubham Khatri

componentDidMountis called after the initial render and hence, at the time of initial render this.state.thing[0]is undefined and hence it would cause an error, you need to perform a conditional check before using this.state.thing[0].status

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>
    );
}

回答by daniel

To answer your question, yes there is a way to setState before the initial render and that is with componentWillMount. It is the first lifecycle method to be called in React. The lifecycle method componentDidMountis called after the initial render.

要回答您的问题，是的，有一种方法可以在初始渲染之前设置状态，即使用componentWillMount. 它是 React 中第一个被调用的生命周期方法。componentDidMount在初始渲染之后调用生命周期方法。

However, looking at your code I'm not sure what the use case is for using componentWillMount. Instead of setting state in componentDidMountor componentWillMount, just set a default state in your constructor function. Then you have the state you want on the initial render and can update it on events accordingly, i.e. your button.

但是，查看您的代码，我不确定使用componentWillMount. 无需在componentDidMountor中设置状态componentWillMount，只需在构造函数中设置默认状态即可。然后您在初始渲染中拥有您想要的状态，并且可以相应地在事件上更新它，即您的按钮。

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

回答by Danny Delott

Check out the other React lifecycle methods

查看其他React 生命周期方法

It sounds like you want componentWillUpdateor shouldComponentUpdatemethods..

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