How to update state with setState before render

问题

I'll preface this by stating that I'm a complete beginner at 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:

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.

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.

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?

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

回答1:

componentDidMount is 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.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>
    );
}

回答2:

Check out the other React lifecycle methods

It sounds like you want componentWillUpdate or shouldComponentUpdate methods..

回答3:

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 componentDidMount is called after the initial render.

However, looking at your code I'm not sure what the use case is for using componentWillMount. Instead of setting state in componentDidMount or 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.

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

来源：https://stackoverflow.com/questions/47799576/how-to-update-state-with-setstate-before-render