Question

我正在创建一个应用程序，它根据“切换器”的复选框值在页面上显示和隐藏UI元素。以及从this.state.items。

创建的列表元素的复选框值

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

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进行过滤并返回所有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
  }
}

我如何回到以前的＆＃39;当我设置“切换器”时的状态为假？

Answer 1

如果您只需要保留默认列表，请将其完全保持在状态之外并将过滤后的列表保持在状态。

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

您甚至可以考虑在render方法本身进行过滤，而不是将过滤后的列表保持在状态。

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

Answer 2

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

-nextState将是你的状态，而this.state就是它现在的样子。

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

尽管如此，由于国家不保留自己的历史，你可能会考虑以不同的方式解决问题。

了解React中的状态

2 个答案: