javascript - 在没有索引或唯一标识符的情况下 react : How to modify an array-based state,？

Question

假设我有一个选项卡式组件。每个选项卡都呈现一个人员对象。用户可以切换事件选项卡、修改或删除每个选项卡，甚至更改它们的顺序:

state={
  activeTab:0,
  tabs:[
    {
      name:'John',
      age:34

    },
    {
      name:'Bob',
      age:31

    },
  ]
}

假设我想修改特定选项卡(人员)的其中一个字段。我可以有这个功能:

modifyTab = (index, prop, value) => {

  const tabs = [...this.state.tabs];

  const tab = tabs[index];

  tab[prop] = value;

  this.setState({ tabs })
}

这样做的问题是它依赖于给定选项卡的索引。但是，如果选项卡索引发生变化，如果我提供切换选项卡顺序的功能，该怎么办？(就像浏览器对其选项卡所做的那样)。

或者，如果我需要为异步操作注册一些回调，当相关人员位于不同的选项卡中时可能会调用该回调(也许在调用回调时选项卡已从 1 移动到 0)，该怎么办)？

有没有办法只依赖对象引用，而不管id、索引或任何其他“标识符”，这使得代码比需要的复杂得多？

对于那些熟悉 VueJS 和 Angular 的人来说，我相信您知道修改对象是多么容易，因为您不需要在每次更改时返回新的状态树。

Answer 1

如果要更改数组的顺序，则在渲染时不能依赖数组 index 来获取 key 属性。解决这个问题的一种常见方法是为数组中的每个对象添加一个唯一的属性并使用它，例如一个id。

将整个对象引用传递给 modifyTab 就可以了。您可以使用简单的 indexOf 找出数组中的哪个对象。

示例

class App extends React.Component {
  state = {
    tabs: [
      {
        name: "John",
        age: 34,
        id: 1
      },
      {
        name: "Bob",
        age: 31,
        id: 2
      }
    ]
  };

  modifyTab = (tab, prop, value) => {
    this.setState(prevState => {
      const tabs = [...prevState.tabs];
      const index = tabs.indexOf(tab);

      tabs[index] = { ...tabs[index], [prop]: value };

      return { tabs };
    });
  };

  render() {
    return (
      <div>
        {this.state.tabs.map(tab => (
          <span
            key={tab.id}
            onClick={() => this.modifyTab(tab, "name", Math.random())}
            style={{ margin: '0 10px' }}
          >
            {tab.name}
          </span>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>