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

IT技术 javascript reactjs state
2021-05-22 14:22:51

我将首先声明我是 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 元素中控制台.log 新状态，但我无法在渲染中实际显示它，因为它首先渲染一个空状态数组。

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

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

3个回答

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

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

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

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

查看其他React 生命周期方法

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

其它你可能感兴趣的问题
上一篇运行 tsc（TypeScript 编译器）时如何将 package.json 复制到 dist 或 build 文件夹中 下一篇React 组件交互和全局状态变化