添加项目后，详细信息列表不会更新

Question

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

我的清单非常简单：

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

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

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

Answer 1

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

来自文档：

当我改变列表中的项目时，我的列表不会重新渲染！我应该怎么办？

为了确定DetailsList 中的List 是否应该重新呈现其内容，该组件在其shouldComponentUpdate方法中执行引用相等性检查。这样做是为了最大限度地减少与重新渲染虚拟化列表页面相关的性能开销，正如 React 文档所建议的那样。

由于此实现，如果数组值发生变化，内部 List 将无法确定是否应该重新渲染。DetailsList为了避免此问题，我们建议使用Array.prototype.concat如下所示的 ES6 扩展语法等方法重新创建支持的 items 数组 ：

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} />;
}

通过重新创建 items 数组而不改变值，内部 List 将正确确定其内容已更改，并且应该重新呈现新值。