Question

我想使用Set对象存储唯一值。但是默认情况下，我们无法使用Set.map（）在React和JSX中对Set值进行循环。

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

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

那么，上述技巧是否正确并且是解决此问题的最佳做法？

在性能和概念方面……

谢谢

Answer 1

这很好，但只有在替换state属性并且不进行突变/浅比较的情况下，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
  . 
  . */
}

希望这会有所帮助！

在Set（）对象上反应JSX循环

1 个答案: