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

Question

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

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

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

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

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

谢谢

标签： javascriptreactjsjsx

Answer 1

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

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
  . 
  . */
}

希望这可以帮助 ！