ReactJS - Вызов setState внутри для l oop, обновление состояния и отображение результата - PullRequest
Новая
       7

ReactJS - Вызов setState внутри для l oop, обновление состояния и отображение результата

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

У меня есть массив данных, которые я хочу вызвать с помощью ax ios, я не использую ax ios .all, потому что я хочу знать ход выполнения каждого запроса и с помощью ax ios .all метод это вызов после завершения всех запросов, я хочу отобразить что-то вроде 15/50 оставшихся запросов.

Запросы внутри for для l oop работают, но вызов setState рендерит только один раз, я знаю, setState асинхронно c и из-за проблем с производительностью я думаю, что React не так часто вызывает setState.

Моя настоящая проблема - обновить состояние реакции внутри для l oop и обновить JSX.

Вот CodeSandbox для задачи для l oop: https://codesandbox.io/s/frosty-field-mdodx?file= / src / App. js: 0-597

А вот суть метода загрузки и как я делаю запросы: 

  uploadRecords = async () => {
    const { recordsUpdated } = this.state
    const { recordData } = this.props

    for (const record of recordData) {
      const response = await createRecord(tenant) //Method of axios
      this.setState({ recordsUpdated: [...recordsUpdated, response] })
    }}

А вот JSX: 

         <div>
            <p className="alert-description text-center">
              Please wait and do not leave the page while we upload the records
            </p>
            <p className="alert-description text-center">
             Uploading: {recordsUpdated.length}/{totalRecords}
            </p>
            <div className="progress-container">
              <p className="text-muted">{recordsUpdated.length}%</p>
              <Progress color="info" value={recordsUpdated.length} />
            </div>
          </div>

Все записи загружены без проблем, но состояние показывает только 1 обновление.

Буду признателен за все отзывы и разные подходы

...