javascript - 在 Set() 对象上 react JSX 循环

Question

我想使用 Set 对象来存储唯一值。但默认情况下，我们不能使用 Set.map() 在 React 和 JSX 中对设置值进行循环。

但是通过这个技巧，我可以将 Set 存储到状态中并在其上进行循环:

<ul>
{
  Array.from(this.state.mySet).map((item, index) => (
    <li key={index}>{item}</li>
  ))
}
</ul>

那么，上述技巧是否正确并且是处理此问题的最佳实践？

在性能和概念方面......

谢谢

Answer 1

这很好，但只有当状态属性被替换时， react 才会识别状态变化，而不是突变/浅比较。您必须使用旧的 Set 来创建新的 Set，然后对其应用更改。这样您就不必强制更新状态。

export default class Test extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      mySet: new Set()
    }

    this.add = this.add.bind(this);
  }

  add(item) {
    this.setState(({ mySet }) => ({
      mySet: new Set(mySet).add(item)
    }));
  }


  /*
  .
  .
  . Other code
  . 
  . */
}

希望对您有所帮助!