office-ui-fabric - 添加项目时，DetailsList 不会更新

Question

我正在使用 office-ui-fabric-react图书馆。我使用的当前版本是 7.17.0。

我的 list super 简单:

<DetailsList
    columns={this.state.columns}
    items={this.state.items}
    compact={true}
    selectionMode={SelectionMode.none}
    enableUpdateAnimations={true}
/>

当我在单独的方法中更改项目(标记为异步)并执行 this.setState({items: someNewItems}) ，列表不会重新呈现。我很好奇这是一个已知问题，还是 DetailsList需要特殊处理吗？

澄清一下，在执行 this.setState 后没有任何变化，但如果我调整页面大小，新元素会突然出现。

Answer 1

这是由于比较浅，实际上解决方案在这里的文档中列出:https://developer.microsoft.com/en-us/fabric#/controls/web/detailslist

从文档:

My List is not re-rendering when I mutate its items! What should I do?

To determine if the List within DetailsList should re-render its contents, the component performs a referential equality check within its shouldComponentUpdate method. This is done to minimize the performance overhead associating with re-rendering the virtualized List pages, as recommended by the React documentation.

As a result of this implementation, the inner List will not determine it should re-render if the array values are mutated. To avoid this problem, we recommend re-creating the items array backing the DetailsList by using a method such as Array.prototype.concat or ES6 spread syntax shown below:

public appendItems(): void {
  const { items } = this.state;

  this.setState({
    items: [...items, ...['Foo', 'Bar']]
  })
}

public render(): JSX.Element {
  const { items } = this.state;

  return <DetailsList items={items} />;
}

By re-creating the items array without mutating the values, the inner List will correctly determine its contents have changed and that it should re-render the new values.