添加项目时，DetailsList 不会更新

Question

我正在使用 office-ui-fabric-react 库。我当前使用的版本是 7.17.0.

我的清单超级简单：

<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

DetailsList 没有问题。 table 应该正确更新，正如您指出的那样，当您调整页面大小时，项目会显示出来，但在此之前不会。这肯定是因为渲染函数没有被再次调用。

这意味着当您执行 this.setState 时，您并没有更新当前组件的状态。作为 Mirage，在评论中建议尝试检查您是否拥有正确的 this 并且您正在更新正确的组件。

Answer 2

这是比较肤浅的结果，实际上解决方案在此处的文档中列出：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.

添加项目时，DetailsList 不会更新

When item added, DetailsList doesn't update

office-ui-fabric

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