Как исправить: переменная в возвращаемом разделе метода рендеринга не обновляется при повторном вызове рендера - PullRequest
Новая
       27

Как исправить: переменная в возвращаемом разделе метода рендеринга не обновляется при повторном вызове рендера

0 голосов
/ 07 октября 2019

Я извлекаю данные из API Flask для асинхронной реакции и обновляю страницу после получения данных. Новые данные корректно обновляют состояние, и при повторном рендеринге страницы отображаются новые данные, за исключением того, что при увеличении количества элементов данных количество страниц из моего класса Pagination также не увеличивается.

У меня естьраспечатал новое состояние и новое количество элементов данных в методе рендеринга, чтобы я мог видеть, что состояние обновилось и вызывается рендеринг.

Вот метод рендеринга: 

render() {
    console.log("Render being called!");
    console.log(this.state)
    const { job_data, currentJobs, currentPage, totalPages } = this.state;
    const totalJobs = job_data.length;
    console.log(totalJobs);  // Total jobs prints out correctly here as 800

    if (totalJobs === 0) return null;

    const headerClass = ['text-dark py-2 pr-4 m-0', currentPage ? 'border-gray border-right' : ''].join(' ').trim();

    return (
      <div className="content">
        <Grid fluid>
          <Row>
           <div className="d-flex flex-row py-4 align-items-right"> 
            // totalJobs should be updated here but isn't 
            <Pagination totalRecords={totalJobs} pageLimit={6} pageNeighbours={1} onPageChanged={this.onPageChanged} />
            </div>

Вот мой асинхронный вызов componentsDidMount, который обновляет мое состояние: 

 async componentDidMount() {
    console.log("Async component componentDidMount")
    const response = await fetch('http://127.0.0.1:5000/');
    console.log("Waiting for new jobs...")
    const json = await response.json();

    this.setState({ job_data: json.eqtls }); 

    console.log(this.state.job_data)
    console.log("Got new jobs!")
    const currentJobs = this.state.job_data.slice(0, 0 + 6);
    const totalPages = 10;
    const currentPage = 1;
    this.setState({ currentPage, currentJobs, totalPages });
  }

Поскольку состояние обновляется, вызывается рендер, и выводится, что totalJobs увеличилось, количество страниц должно увеличиться, но это не так. «т.

1 Ответ

0 голосов
/ 07 октября 2019

Я вижу несколько проблем ems: - async componentDidMount ()? Используйте внутренние функции: componentDidMount() { async invokeApi() { //api call here } invokeApi(); }

  • в этом случае я не вижу необходимости устанавливать setState дважды. Извлеките переменные и используйте его один раз для удобства чтения.

Обратите внимание, что setState является асинхронным и не гарантирует порядок. Обновите componentDidUpdate для эффективной обработки нежелательного повторного отображения.

...