Flatlist не отображает данные должным образом даже после добавления данных в React Native?

Question

Я добавляю данные в плоский список в onMomentumScrollEnd, я получил данные из моего REST API, которые все еще не обрабатываются должным образом. .state.responseData

getData(text, apiType, pageno) {
    this.showLoader();
    this.setState({
      pageno: pageno,
      search: text,
      type: apiType,
    });

    let data = {
      pageNo: pageno,
      type: apiType,
      search: text,
      sortedBy: '',
      sortedIn: 'DESC',
      filter: {},
    };

    const headers = {
      'X-Auth-Token': this.state.token,
      'Content-Type': 'application/json',
    };

    console.log(data);

    axios
      .post(PIDataApi, data, {headers: headers})
      .then(response => {
        this.setState({
          isLoading: false,
        });
        if (response.data.status != 2000) {
          Toast.show(response.data.error.errorMessage, Toast.SHORT);
        } else {
          if (response.data.data.resource != null) {
            let historyData = response.data.data.resource;
            console.log('api response:', historyData);
            if (this.state.pageno > 1) {
              this.setState({
                responseData: [...this.state.responseData, historyData],
                maxPage: response.data.data.maxPage,
              });
              console.log('responseData : ', this.state.responseData);
            } else {
              this.setState({
                responseData: historyData,
                maxPage: response.data.data.maxPage,
              });
            }
          } else {
            Toast.show(response.data.data.message, Toast.SHORT);
          }
        }
      })

      .catch(error => {
        console.error(error);
      });
  }

вы можете увидеть, как данные отображаются в списке, даже после правильного добавления данных

Answer 1

Ответ, который вы получаете от запроса ax ios, отправляет вам historyData в виде массива, однако вы устанавливаете его в состояние напрямую без распространения

Также, когда вы обновляете состояние на основе предыдущего состояния , используйте функциональный setState

  if (this.state.pageno > 1) {
          this.setState(prevState => ({
            responseData: [...prevState.responseData, ...historyData], // spread historyData here
            maxPage: response.data.data.maxPage,
          }));
        } else {
          this.setState({
            responseData: historyData,
            maxPage: response.data.data.maxPage,
          });
        }