渲染前如何使用setState更新状态 [英] How to update state with setState before render

问题描述

我将以说自己是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时，不能保证会对其进行更新.我还找到了"forceUpdate()"，并且文档建议尽可能少使用它.但是，我尝试使用它，但无济于事.

在componentDidMount()运行期间以及在渲染的h1元素中，我能够console.log新状态，但是由于它首先渲染了一个空状态数组，因此我无法在渲染中实际显示它./p>

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

旁注: JSX按钮上有一个onClick，但是我放弃了这一点，直到能够在JSX h1中看到新状态为止

解决方案

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

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

解决方案

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

这篇关于渲染前如何使用setState更新状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！