Javascript ReactJS，axios响应未正确发送到我的数据集

我一直在绞尽脑汁想如何解决这个问题。我有一个DataTable组件，它显示来自axios响应的数据集（来自parent-ProductListing）

我可以从axios获得预期的结果，但只有在数据表已经呈现之后，我才知道我遗漏了什么，希望有人能帮助我

产品列表组件

class ProductListings extends Component {
  constructor(props){
    super(props);

    this.state = {
      dataSet: []
    }
  }
  componentDidMount(){
    this.props.getProducts({}).then(
      (res) => {
        this.setState({ dataSet: res.data });
      }
    );
  }
  render(){
    console.log(this.state.dataSet);
    return (
      <div className="content-wrapper">
        <section className="content-header">
          <DataTable dataSet={this.state.dataSet}/>
        </section>
      </div>
    );
  }
}
export default connect(null, {getProducts})(ProductListings);

class DataTable extends Component {
  componentDidMount(){
    this.$el = $(this.el);
    this.$el.DataTable(
      {
        data: this.props.dataSet,
        columns: [
          { title: "ID" },
          { title: "Title" },
          { title: "Short Desc" },
          { title: "Full Desc" },
          { title: "Release Type" },
          { title: "Country Code" }
        ],
        buttons: [
          'copy'
        ]
      }
    )
  }
  componentWillUnmount(){

  }
  render(){
    return (
      <div>
        <table className="display" width="100%" ref={el => this.el = el}></table>
      </div>
    );
  }
}
export default DataTable;

类ProductListings扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据集：[]
}
}
componentDidMount（）{
this.props.getProducts（{}）(
（res）=>{
this.setState（{dataSet:res.data}）；
}
);
}
render（）{
log（this.state.dataSet）；
返回(
);
}
}
导出默认连接（null，{getProducts}）（ProductListings）；

数据表组件

class ProductListings extends Component {
  constructor(props){
    super(props);

    this.state = {
      dataSet: []
    }
  }
  componentDidMount(){
    this.props.getProducts({}).then(
      (res) => {
        this.setState({ dataSet: res.data });
      }
    );
  }
  render(){
    console.log(this.state.dataSet);
    return (
      <div className="content-wrapper">
        <section className="content-header">
          <DataTable dataSet={this.state.dataSet}/>
        </section>
      </div>
    );
  }
}
export default connect(null, {getProducts})(ProductListings);

class DataTable extends Component {
  componentDidMount(){
    this.$el = $(this.el);
    this.$el.DataTable(
      {
        data: this.props.dataSet,
        columns: [
          { title: "ID" },
          { title: "Title" },
          { title: "Short Desc" },
          { title: "Full Desc" },
          { title: "Release Type" },
          { title: "Country Code" }
        ],
        buttons: [
          'copy'
        ]
      }
    )
  }
  componentWillUnmount(){

  }
  render(){
    return (
      <div>
        <table className="display" width="100%" ref={el => this.el = el}></table>
      </div>
    );
  }
}
export default DataTable;

类数据表扩展组件{
componentDidMount（）{
this.$el=$（this.el）；
这是$el.DataTable(
{
数据：this.props.dataSet，
栏目：[
{标题：“ID”}，
{title:“title”}，
{title:“Short Desc”}，
{标题：“完整描述”}，
{标题：“发布类型”}，
{标题：“国家代码”}
],
按钮：[
“复制”
]
}
)
}
组件将卸载（）{
}
render（）{
返回(
this.el=el}>
);
}
}
导出默认数据表；

---

实际上，您的代码没有问题，这是预期的行为。 您正在

产品列表中调用异步请求，因此不能保证数据在呈现子对象之前到达。在装入
数据表时，请求尚未完成，这就是为什么会得到一个空（初始）数组

如果只想在数据就绪时呈现
DataTable
组件，请检查
ProductsListing
组件中的数组长度

像这样：

class ProductListings extends Component {
  constructor(props){
    super(props);

    this.state = {
      dataSet: []
    }
  }
  componentDidMount(){
    this.props.getProducts({}).then(
      (res) => {
        this.setState({ dataSet: res.data });
      }
    );
  }
  render(){
    console.log(this.state.dataSet);
    return (
      <div className="content-wrapper">
        <section className="content-header">
          {!!this.state.dataSet.length && <DataTable dataSet={this.state.dataSet}/>}
        </section>
      </div>
    );
  }
}
export default connect(null, {getProducts})(ProductListings);

类ProductListings扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据集：[]
}
}
componentDidMount（）{
this.props.getProducts（{}）(
（res）=>{
this.setState（{dataSet:res.data}）；
}
);
}
render（）{
log（this.state.dataSet）；
返回(
{！！this.state.dataSet.length&&}
);
}
}
导出默认连接（null，{getProducts}）（ProductListings）；

在这种情况下，您可以确保在响应准备就绪后将呈现
数据表

这里有一个陷阱。若数组为空，即使服务器返回空数组，也不会呈现组件

如果您想在表中显示“数据为空”之类的内容，并让代码按您的意愿工作，请使用
componentdiddupdate
生命周期挂钩，而不是
DataTable
组件中的
componentDidMount
。
您是否可以尝试向子组件（DataTable）添加构造函数，如下面的构造函数（道具）{super}（props）；}你想实现什么？我看代码没有问题。你想只在响应就绪时显示
DataTable
吗？当
DataTable
组件装载时，
this.props.dataSet
仍然是空的。我知道，这只是一个简单的修复，我只是缺少了一些东西。谢谢