Question

在这里完成Reactjs新手。我知道setState（）是异步的。我知道如果我执行setState（）然后状态排队和批处理，所以我不会立即看到状态改变。很公平。

我还在SO中阅读了以下链接和其他问题：

https://reactjs.org/docs/react-component.html#setstate

我可以使用：setState中的回调方法，componentDidUpdate（）生命周期方法，如果状态是数组则连接。我得到所有这些方法。我的问题很简单，在过去的两天里，我对这个问题感到头疼，所以我现在已经知道了。

我有这个逻辑：

class ItemList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {showCompleted: false};
        this.shouldShowFullList = false;
        this.onShowCompleted = this.onShowCompleted.bind(this);
    }

    onShowCompleted(event) {
        this.setState({showCompleted: event}, () => {this.shouldShowFullList = this.state.showCompleted;});
    }

    render() {
        if (this.shouldShowFullList) {
            return this.renderAllItemsIncludingCompleted();
        } else {
            return this.renderOnlyNotCompletedItems();
        }
    }

    ...

逻辑是不言自明的。我的问题是即使我在setState（）的回调方法中调用this.shouldShowFullList，它仍然没有显示更新的值。当应该为true时，this.shouldShowFullList的值为false，反之亦然。将this.shouldShowFullList的值与this.state.showCompleted锁定在一起的最佳方法是什么？

注意：onShowCompleted（）是从子组件触发的回调方法。当选中一个名为“显示已完成”的复选框时，我应该显示一个完整的项目列表，或者只显示未完成的项目 - 类似待办事项列表。

Answer 1

在onShowCompleted做

this.setState({ showCompleted: true })

或者如果要切换值

this.setState({ showCompleted: !this.state.showCompleted })

然后在渲染方法中你可以做

 if (this.state.showCompleted) {
   return this.renderAllItemsIncludingCompleted();
 } else {
   return this.renderOnlyNotCompletedItems();
 }

使用setState设置状态时，调用方法render并更新this.state。我认为this.setState的回调（第二个参数）是在渲染之后调用的。

因为更新this.state会生成一个新的渲染，所以似乎反应正在推动你在render方法中使用this.state。事实上，它是为这种用法而制作的。如果要创建一个在渲染中没有用处的变量，可以使用this.myVariable。最好的做法是在渲染（或依赖于它的函数）中仅使用this.state和this.props。

Reactjs：立即更新状态

1 个答案: