ReactJS, ответ Axios не отправляется на мой набор данных должным образом

Question

Я ломал голову, как это исправить.У меня есть компонент DataTable, который отображает набор данных из ответа axios (из 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;

Журнал консоли 1 Журнал консоли 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 компоненте.