Реагировать setState не перерисовывается с ожидаемым ответом - PullRequest
Новая
       9

Реагировать setState не перерисовывается с ожидаемым ответом

0 голосов
/ 08 апреля 2020

Я пытаюсь отобразить содержимое компонента, используя данные, извлеченные из API.

API успешно возвращает данные и состояние обновлений, как показано в выводе консоли, регистрируется при рендеринге и сравнивается prevState и newState в componentDidUpdate ().

Однако, новое состояние не отображается в компоненте, почему это так?

Содержимое отображает , если я go на другую страницу, например, ' / ', а затем обратно в' / table ', но это не так при обновлении страницы.

Оцените любую помощь 

export default class Table extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [],
    };
  }

  componentDidMount() {
    this.getTableRows();
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('Component did update. Prev: ', prevState, 'New: ', this.state);
  }

  getTableRows = async () => {
    try {
      const response = await fetchData();
      this.setState({
        data: response,
      });
    } catch (err) {
      console.log(err);
    }
  };

  render() {
    console.log('RENDER - props:', this.props, 'state:', this.state);
    return (
        <Container>
          <Table.Body>
            {this.state.data.map(item => {
              return (
                <TableRow
                  key={item.key}
                  response={item.response}
                  approved={item.approved}
                />
              );
            })}
          </Table.Body>
        </Container>

ОБНОВЛЕНИЕ: Дополнительный контекст

Вот пример данных состояния: 

[
  {
    "key": "recBIW8drmVpC8sNT",
    "response": "Example",
    "approved": true,
    "date": "2020-04-02T03:30:00.000Z"
  },
  {
    "key": "recWZtUAHf4Z78lP2",
    "response": "Example",
    "approved": true,
    "date": "2020-04-03T20:30:00.000Z"
  },
  {
    "key": "recch8GoP59PyftxX",
    "response": "Example",
    "approved": true,
    "date": "2020-03-31T23:00:00.000Z"
  },
  {
    "key": "recg8uRL6RSKroCjZ",
    "response": "Example",
    "approved": true,
    "date": "2020-04-04T22:00:00.000Z"
  },
  {
    "key": "recimzyYWbVf1c7WC",
    "response": "Example",
    "approved": true,
    "date": "2020-04-06T01:00:00.000Z"
  }
]

Вот как я создаю возвращаемый объект в getData (): 

let data = [];

fetchAirtableData = async () => {
  base('Responses')
    .select()
    .eachPage(
      function page(records, fetchNextPage) {
        // This function (`page`) will get called for each page of records.

        records.forEach(function(record) {
          let key = record.getId();
          let response = record.get('Response');
          let approved = record.get('Approved');
          let date = record.get('Date Submitted');

          data.push({ key, response, approved, date });
        });

        fetchNextPage();
      },
      (cb = err => {
        if (err) {
          console.error(err);
          return;
        }
      }),
    );

  return data;
};

Вот вывод в консоль (изображение)

...