Javascript 反应台重新招标不'；道具换了就不行了

我正在使用并希望基于从父元素传递的道具呈现带/不带的表

我试图用

数据

和

列

更新state——新数组，但表没有重新呈现

js

import React from "react";
import { render } from "react-dom";
import { makeData, Logo, Tips } from "./Utils";

// Import React Table
import ReactTable from "react-table";
import "react-table/react-table.css";

const data = [
  {
    a: "32,000.02938488",
    b: "0",
    c: "32,000.02938488",
    d: "55,000"
  },
  {
    a: "32,000.02938488",
    b: "0",
    c: "32,000.02938488",
    d: "55,000"
  },
  {
    a: "32,000.02938488",
    b: "0",
    c: "32,000.02938488",
    d: "55,000"
  },
  {
    a: "32,000.02938488",
    b: "0",
    c: "32,000.02938488",
    d: "55,000"
  },
  {
    a: "32,000.02938488",
    b: "0",
    c: "32,000.02938488",
    d: "55,000"
  },
  {
    a: "32,000.02938488",
    b: "0",
    c: "32,000.02938488",
    d: "55,000"
  },
  {
    a: "32,000.02938488",
    b: "0",
    c: "32,000.02938488",
    d: "55,000"
  }
];

const columns = [
  {
    Header: "a",
    accessor: "a"
  },
  {
    Header: "b",
    accessor: "b"
  },
  {
    Header: "c",
    accessor: "c"
  },
  {
    Header: "d",
    accessor: "d"
  }
];

class Table extends React.Component {
  state = {
    columns: this.props.columns,
    data: this.props.data
  };

  componentWillReceiveProps(nextProps) {
    if (nextProps.expand !== this.props.expand) {
      console.log("update data");
      this.setState({
        columns: [...nextProps.columns],
        data: [...nextProps.data]
      });
    }
  }

  render() {
    console.log(this.props.expand);
    return (
      <div>
        {this.props.expand ? (
          <ReactTable
            data={this.state.data}
            columns={this.state.columns}
            showPagination={false}
            defaultPageSize={data.length}
            resizable={false}
            SubComponent={row => {
              return (
                <div>
                  <h1>expanded state</h1>
                </div>
              );
            }}
          />
        ) : (
          <ReactTable
            data={data}
            columns={columns}
            showPagination={false}
            defaultPageSize={data.length}
            resizable={false}
          />
        )}
      </div>
    );
  }
}

class App extends React.Component {
  state = {
    expand: true
  };

  componentDidMount() {
    const that = this;
    setTimeout(() => {
      that.setState({ expand: false });
    }, 2000);
  }

  render() {
    const { expand } = this.state;
    return (
      <div>
        <Table columns={columns} data={data} expand={expand} />
        <br />
        <Tips />
        <Logo />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

从“React”导入React；
从“react dom”导入{render}；
从“/Utils”导入{makeData，Logo，Tips}；
//导入反应表
从“反应表”导入反应表；
导入“react table/react table.css”；
常数数据=[
{
答：“32000.02938488”，
b:“0”，
c:“32000.02938488”，
d：“55000”
},
{
答：“32000.02938488”，
b:“0”，
c:“32000.02938488”，
d：“55000”
},
{
答：“32000.02938488”，
b:“0”，
c:“32000.02938488”，
d：“55000”
},
{
答：“32000.02938488”，
b:“0”，
c:“32000.02938488”，
d：“55000”
},
{
答：“32000.02938488”，
b:“0”，
c:“32000.02938488”，
d：“55000”
},
{
答：“32000.02938488”，
b:“0”，
c:“32000.02938488”，
d：“55000”
},
{
答：“32000.02938488”，
b:“0”，
c:“32000.02938488”，
d：“55000”
}
];
常量列=[
{
标题：“a”，
存取器：“a”
},
{
标题：“b”，
存取器：“b”
},
{
标题：“c”，
存取器：“c”
},
{
标题：“d”，
存取器：“d”
}
];
类表扩展了React.Component{
状态={
columns:this.props.columns，
数据：this.props.data
};
组件将接收道具（下一步）{
if（nextrops.expand！==this.props.expand）{
控制台日志（“更新数据”）；
这是我的国家({
列：[…nextrops.columns]，
数据：[…nextrops.data]
});
}
}
render（）{
console.log（this.props.expand）；
返回(
{this.props.expand(
{
返回(
扩展状态
);
}}
/>
) : (
)}
);
}
}
类应用程序扩展了React.Component{
状态={
扩展：正确
};
componentDidMount（）{
常数=this；
设置超时（（）=>{
setState（{expand:false}）；
}, 2000);
}
render（）{
const{expand}=this.state；
返回(


);
}
}
render（，document.getElementById（“根”））；

查看源代码，您应该能够重置子组件，但如果将其设置为未定义，则无法重置（这与props在props中未定义时如何不覆盖状态有关）

将SubComponent设置为null或false将获得

类表扩展了React.Component{
render（）{
log（“props:，this.props”）；
返回(
(
扩展状态
)
：错
}
/>
);
}
}

看起来像一个bug，一旦设置了

子组件

，它就永远无法取消设置（componentDidMount或constructor）。我更新了代码。也许您应该提交一个问题，这是一个解决方案，它将强制react表在扩展更改时卸载和重新装载。@HMR谢谢。也许你可以写下你的第二条评论作为答案，我可以结束这个问题。谢谢，我尝试使用你的代码，但是如果没有父元素中的

expandChanged

，这个示例就无法工作。我想我会继续打开这个问题并创建新问题。Thanks@Matt不能将

子组件

属性设置为未定义，可以将其设置为false或null

：false

，而不是sandbox@Matt为此创建了一个，因为将道具设置为“未定义”不应使该道具粘在周围。在他们的代码中找到了这个bug的原因，但不确定维护人员将如何/是否“修复”它。

class Table extends React.Component {
  render() {
    console.log("props:", this.props);
    return (
      <div>
        <ReactTable
          data={this.props.data}
          columns={this.props.columns}
          showPagination={false}
          defaultPageSize={this.props.data.length}
          resizable={false}
          SubComponent={
            this.props.expand
              ? row => (
                  <div>
                    <h1>expanded state</h1>
                  </div>
                )
              : false
          }
        />
      </div>
    );
  }
}