理解 React 中的状态

Question

我正在创建一个应用程序，它根据 'toggler' 的复选框值和从 this.state.items 创建的列表元素的复选框值显示和隐藏页面上的 UI 元素.

该应用的初始状态设置为：

state = {
    items: [
        {
            id: 1,
            name: 'Water',
            isComplete: false
        }, {
            id: 2,
            name: 'Salt',
            isComplete: false
        }, {
            id: 3,
            name: 'Bread',
            isComplete: false
        }
    ],
    isChecked: false,
    currentItem: '',
    inputMessage: 'Add Items to Shopping Basket'
}

我创建了以下过滤 items 和 returns 所有 isComplete: false 的方法，然后我使用这些返回的项目设置新状态。

toggleChange = (e) => {
  this.setState({isChecked: !this.state.isChecked});
  if (!this.state.isChecked) {
    const filtered = this.state.items.filter(isComplete);
    this.setState({items: filtered})
  } else {
    // display previous state of this.state.items
  }
}

当我将 'toggler' 设置为 false 时，如何返回到 'Previous' 状态？

Answer 1

如果您只需要保留默认列表，则将其完全置于非状态并将过滤后的列表保持在状态中。

这样您就可以随时过滤原始列表。

您甚至可以考虑在 render 方法本身中进行过滤，并且根本不保持过滤列表的状态。

如果您需要在进行更改之前返回（保留历史记录）您可以在您所在的州维护另一个过滤列表。

Answer 2

我不确定你想做什么，但是，如果你实现 componentWillUpdate() (https://facebook.github.io/react/docs/react-component.html#componentwillupdate)，你就可以访问下一个状态和当前状态。

-nextState 将是您的状态，this.state 是现在的状态。

您可以在 this.state 更新之前将其保存到另一个名为 this.oldState 的变量中，然后再引用它。

尽管如此，由于状态不保留其自身的历史记录，您可能会考虑以不同的方式解决问题。

理解 React 中的状态

Understanding state in React

state

reactjs