在react表的子组件中设置状态将关闭组件，并使用ReactJS重置所有状态

在我的react应用程序中，我一直在大量使用react table，这非常有用，但现在我发现了一个奇怪的bug

我有一个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>
    );
  }}
/>

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

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

在控制台中，我没有从react表中获得任何错误或日志-似乎每当我尝试在react表子组件中设置一个状态时，它都会自动关闭，如下所示

我的猜测是，设置状态已经重置了所有的状态，这就是使react表混乱的原因，但我不知道会是什么情况

我刚刚将react table更新为最新版本6.8.6，但仍然存在相同的问题

---

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

我通过collapseOnDataChange:false解决了这个问题。

我也遇到了类似的问题。我有一个子组件，子组件内有按钮，单击时可触发功能：

“删除”按钮具有以下代码：

<button id="delete" onClick={this.deleteClient('id')}>Delete</button>

在上面的代码中，当我打开子组件和单击按钮时，“deleting id”将显示console.log

我通过在onClick中使用回调解决了这个问题：

<button id="delete" onClick={() => this.deleteClient('id')}>Delete</button>

this.deleteClient（'id'）}>Delete

现在，在适当的时间，即我点击“删除”时，仅“删除id”console.logs一次

TL；医生：

将onClick设置为回调函数

---

希望有帮助

你的代码使用官方的Dyo工作得很好-那么你能看看这个吗。。。的确如此！好啊好吧，我的本地设置，谢谢你指出这一点！奇怪的是，这在6.8.6版中对我不起作用。反应台有手动道具，移除它也不起作用。当子组件道具发生变化时，它会不断卸载和重新安装子组件。。。

deleteClient = (clientRef) => {
      console.log(`deleting ${clientRef}`)

    }

<button id="delete" onClick={() => this.deleteClient('id')}>Delete</button>