有没有办法设置所有现有的 ReactJS 状态而不指定它们？答案

【问题标题】：Is there a way to set all existing ReactJS states without specifying them?有没有办法设置所有现有的 ReactJS 状态而不指定它们？
【发布时间】：2019-06-13 11:01:10
【问题描述】：

我有在同一页面中多次使用的组件，并且每次显示它时都会为其设置新状态。州名来自 DB，所以我不知道州名。我想知道是否有办法将所有现有状态设置为 false。在每个组件中都有复选框。在我的页面中，一次应该只选择一个复选框。通过将所有状态更改为 false 我可以在单击其他复选框时取消选中所有复选框。

onSelect = (e) => {
 this.setState({
  // allStates: false,  <------------- Something like that 
  [e.target.getAttribute('data-id')]: !this.state[e.target.getAttribute('data-id')]
 });
}


render() {
 return (
  <div>
    <SearchResult data-id="a" pName="Duracell 1" onClick={this.onSelect} selected={this.state.a} />
    <SearchResult data-id="b" pName="Duracell 2" onClick={this.onSelect} selected={this.state.b} />
    <SearchResult data-id="c" pName="Duracell 3" onClick={this.onSelect} selected={this.state.c} />
  </div>
 )
}

所以在将状态设置为 true 之前，我需要以某种方式将所有其他状态设置为 false。

【问题讨论】：

你可能想看看redux：redux.js.org
我相信必须有更简单的方法来做到这一点，然后使用 Redux。我的意思是更少的代码 + 我不需要使这些状态成为全球性的，它们保持在 1 个组件内。无论如何谢谢:)
你为什么不用<input type="radio" ... />？
是的，没错，也许我可以使用 map() 函数和输入类型=radio。我想我只是忘记了这个选项。我只是非常喜欢尝试使用 React 的可能性来更快地适应它。如果当前选项不起作用，那么将执行此操作。谢谢

标签： reactjs state

【解决方案1】：

onSelect = (e) => {
  const currentDataId = e.target.getAttribute('data-id');

  this.setState(state => {
    const newState = {};
    for (const dataId in state) {
      newState[dataId] = dataId === currentDataId; // false for everything but current
    }

    return newState;
  });
}

请注意，由于要使用异步状态更新器功能来处理当前状态，因此应预先处理合成事件。

【讨论】：

也许我做错了什么，但是在浏览器反应窗口中，当我使用这种方法时没有设置状态。不知道为什么。
@EdgarsŠusts 你什么意思？没有 setState 方法？请提供一种复制问题的方法。
我仔细检查了一遍。在我的意思是根本没有设置状态之前。但现在我看到所有状态都设置为 false。因此，我将在您的代码之后添加行，将所选项目状态设置为 true。也许对你来说它正在工作，我做错了什么？
我不能说出了什么问题，因为问题不包含 stackoverflow.com/help/mcve 。如果您按照描述进行所有操作，我希望它能够正常工作。你调试 currentDataId 了吗？我不太喜欢将数据存储为数据属性，这闻起来像 jQuery，React 中的一种常见方式是提供它作为回调 arg，... onClick={() => this.onSelect(this.state.a)} selected={this.state.a}。如果问题仍然存在，请考虑提供一种方法来复制问题。

【解决方案2】：

演示：https://stackblitz.com/edit/react-zu6jxb

基本上，如果您“不知道”对象的确切键，则可以使用 Object.keys 并将该键数组减少为所有键设置为 false 的新对象，例如：

const maleAllValuesFalse = object => Object
  .keys(object)
  .reduce((prev, curr) => ({
    ...prev,
    [curr]: false,
  }), {});

这里我们将一个对象的所有值都设置为 false。让我们看看如何将这个解决方案合并到一个 React 应用程序中。

handleChange = (event) => {
  // you can use any other attribute
  // I just used name...
  const name = event.target.getAttribute('name');

  this.setState((prevState) => {
    const nextCheck = !prevState[name];

    return {
      ...(nextCheck ? maleAllValuesFalse(prevState) : {}),
      [name]: nextCheck,
    };
  });
};

我不太喜欢使用 <input type="checkbox" /> 重新创建这种行为，因为这就是原生 <input type="radio" /> 的工作方式，没有 JavaScript 行：DEMO。

【讨论】：