reactjs - 在react-table的子组件中设置状态会关闭组件并使用ReactJS重置所有状态

Question

我在我的 React 应用程序中大量使用了 React-table，它非常有用，但现在我发现了一个奇怪的错误，我相信

我有一个带有这样结构的子组件的 react 表

<ReactTable
  data={Data}
  columns={columns}
  SubComponent={row => {
    return (
      <div>
        <p>I am the subcomponent</p>

        <button onClick={this.toggleHidden.bind(this)} >
          Click to additional information
        </button>
        {!this.state.isHidden && <p>Hello world</p>}
      </div>
    );
  }}
/>

这就是浏览器中的样子 - 左侧的蓝色按钮打开和关闭子组件，效果很好，我在整个 React 应用程序中使用了这样的子组件，没有任何问题

当点击“点击附加信息”按钮时，我想显示附加信息(本例中为“Hello world”)，它会运行这段代码

  constructor () {
    super()
    this.state = {
      isHidden: true
    }
  }
  toggleHidden () {
    this.setState({
      isHidden: !this.state.isHidden
    })
  }

但是浏览器中发生的情况是子组件切换已关闭，如下所示

如果我重新打开子组件，您可以看到“hello world”现在正在显示，所以如果确实按我想要的方式工作，但只是自动关闭我不希望发生的子组件

在控制台中，我没有从react-table中收到任何错误或日志 - 似乎每当我尝试在react-table子组件内部设置一个状态时，它都会像这样自动关闭

我的猜测是，设置状态已经重置了所有状态，这就是令人困惑的 react 表，但我不明白它会是什么样子？

我刚刚将react-table更新到最新版本6.8.6，但仍然有同样的问题

这是一个错误还是我在这里做错了什么？

Answer 1

我通过collapseOnDataChange: false修复了这个问题