Question

我在我的React应用程序中一直大量使用react-table，它是如此有用，但是现在我有一个奇怪的错误，我相信

我有一个带有子组件的反应表

<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 App中都使用了这样的子组件，没问题

单击“我想显示其他信息”（在本示例中为“ Hello world”）时，单击“单击以获取其他信息”按钮，它将运行这段代码

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

但是在浏览器中发生的是子组件切换已关闭并且看起来像这样

如果我重新打开子组件，您会看到“ hello world”现在正在显示，因此是否按我的意愿工作了，但只是自动关闭了我不想发生的子组件

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

我的猜测是，设置状态会重置所有状态，这就是令人困惑的react-table，但是我不知道会怎样？

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

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

Answer 1

我有一个类似的问题。我有一个子组件，在子组件内部是按钮，单击这些按钮可触发功能：

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

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-actuator</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-redis-reactive</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-oauth2-client</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web-services</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-security</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.flywaydb</groupId>
        <artifactId>flyway-core</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.cloud</groupId>
        <artifactId>spring-cloud-starter-netflix-hystrix</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.cloud</groupId>
        <artifactId>spring-cloud-starter-netflix-zuul</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-rest</artifactId>
    </dependency>
    <dependency> 
        <groupId>org.springframework.retry</groupId>
        <artifactId>spring-retry</artifactId>
    </dependency>
    <dependency> 
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.data</groupId>
        <artifactId>spring-data-envers</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.security</groupId>
        <artifactId>spring-security-ldap</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-groovy-templates</artifactId>
    </dependency> 
    <dependency>
        <groupId>net.sf.ehcache</groupId>
        <artifactId>ehcache</artifactId>
    </dependency> 
    <dependency>
        <groupId>org.apache.commons</groupId>
        <artifactId>commons-collections4</artifactId>
        <version>${commons-collections.version}</version>
    </dependency>
    <dependency>
        <groupId>org.apache.commons</groupId>
        <artifactId>commons-lang3</artifactId>
    </dependency>

   <dependency>
        <groupId>io.springfox</groupId>
        <artifactId>springfox-swagger2</artifactId>
        <version>2.9.2</version>
    </dependency>

    <dependency>
        <groupId>com.h2database</groupId>
        <artifactId>h2</artifactId>
        <scope>runtime</scope>
    </dependency>
    <dependency>
        <groupId>com.microsoft.sqlserver</groupId>
        <artifactId>mssql-jdbc</artifactId>
        <scope>runtime</scope>
    </dependency>

    <dependency>
        <groupId>io.projectreactor</groupId>
        <artifactId>reactor-test</artifactId>
        <scope>test</scope>
    </dependency>
    <dependency>
        <groupId>org.springframework.security</groupId>
        <artifactId>spring-security-test</artifactId>
        <scope>test</scope>
    </dependency>


<dependencyManagement>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-parent</artifactId>
            <version>${spring-boot.version}</version>
            <type>pom</type>
            <scope>import</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-dependencies</artifactId>
            <version>${spring-cloud.version}</version>
            <type>pom</type>
            <scope>import</scope>
        </dependency>
    </dependencies>
</dependencyManagement>

其中deleteClient定义为：

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

使用上面的代码，当我打开子组件和单击按钮时，“ deleting id”都会console.log。

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

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

    }

现在“删除ID”仅在适当的时间（即当我单击“删除”时）记录一次console.log。

TL; DR：

将onClick设置为回调函数。

希望有帮助！

Answer 2

我通过crashOnDataChange修复了此问题：false

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

2 个答案: