Question

我一直在研究如何解决这个问题。我有一个DataTable组件，它显示来自axios响应的dataSet（来自parent - ProductListing）。

我可以从axios获得预期的结果，但只有在DataTable已经渲染之后，我知道我只是遗漏了一些东西，希望有人可以帮助我。

ProductListing组件

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);

DataTable组件

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;

Console log 1 Console log 2

Answer 1

实际上，您的代码没有问题，这是预期的行为。您正在ProductsListing中调用异步请求，因此无法保证数据在呈现子项之前到来。当你的DataTable被挂载时，请求没有完成，这就是为什么你得到一个空的（初始）数组。

如果只想在数据准备就绪时呈现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);

在这种情况下，您可以确保在响应准备就绪后呈现DataTable。

这是一个陷阱。如果数组为空，即使服务器返回，也不会呈现您的组件。

如果您希望在表格中显示类似“数据为空”的内容，并根据需要使用componentDidUpdate生命周期挂钩而不是componentDidMount组件中的DataTable。< / p>

ReactJS，axios响应没有正确发送到我的dataSet

1 个答案: