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没有问题。该表应该正确更新，因为您指出调整页面大小时会显示项目，但在此之前不会显示。绝对是因为没有再次调用render函数。

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

Answer 2

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

从文档中

当我更改列表时，列表不会重新呈现！我该怎么办？

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

此实施的结果是，内部List不会确定   如果数组值发生突变，则应重新渲染。为了避免这种情况   问题，建议您重新创建支持   DetailsList，例如使用Array.prototype.concat或   ES6传播语法如下所示：
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数组而不改变值，内部列表将正确确定其内容已更改并且应该重新渲染新值。

添加项目时，DetailsList不会更新

2 个答案:

当我更改列表时，列表不会重新呈现！我该怎么办？