Chain React setState обратные вызовы - PullRequest
Новая
       14

Chain React setState обратные вызовы

0 голосов
/ 09 ноября 2018

Мне нужно загрузить три разных файла json в упорядоченной последовательности и с извлечением (причина в том, что я использую экспорт nextjs, и мне нужно, чтобы эти файлы читались динамически, поэтому я извлекаю их при необходимости, и их содержимое может менятьсядаже после экспорта)

Первый файл содержит данные, которые используются для создания URL-адреса для второго файла и т. д., поэтому для каждой выборки необходимо получить фактически обновленное состояние для извлечения,

ATM решение, которое я использую, поскольку второй и третий файлы зависят от первого и второго соответственно, выбирает первый файл и устанавливает некоторое состояние с помощью setState, затем в обратном вызове setState извлекает второй файл иустановить другое состояние и так далее: 

fetch(baseUrl).then(
            response => response.json()
        ).then(
            res => { 
                this.setState({
                    ...
                }, () => {
                    fetch(anotherUrl+dataFromUpdatedState).then(
                        response => response.json()
                    ).then(
                        res => { 
                            this.setState({
                                ...
                            }, () => {                                 
                                fetch(anotherUrl+dataFromUpdatedState).then(
                                    response => response.json()
                                ).then(
                                    res => {
                                        this.setState({

                                        })
                                    }
                                )
                            })
                        }
                    ).catch(
                        error => {
                            //error handling
                        }
                    )
                })
            }
        ).catch(
            error => {
                this.setState({ //an error occured, fallback to default
                    market: defaultMarket,
                    language: defaultLanguage,
                    questions: defaultQuestions
                })
                //this.setLanguage();
            }
        )

Теперь: я знаю, что setState нужно использовать осторожно, поскольку он асинхронный, но, насколько я знаю, функция обратного вызова вызывается после обновления состояния, поэтому из этогоТочка зрения государства должна корректно обновляться.Является ли это решение анти-паттерном, плохой практикой или по какой-то причине его следует избегать?

Код на самом деле работает, но я не уверен, так ли это.

1 Ответ

0 голосов
/ 09 ноября 2018

Вам не нужно использовать обратный вызов setState и читать его из состояния, поскольку вы можете просто прочитать данные непосредственно из объекта res. Таким образом, вы можете создать плоскую цепочку обещаний.

Пример 

fetch(baseUrl)
  .then(response => response.json())
  .then(res => {
    this.setState({
      // ...
    });

    return fetch(anotherUrl + dataFromRes);
  })
  .then(response => response.json())
  .then(res => {
    this.setState({
      // ...
    });

    return fetch(anotherUrl + dataFromRes);
  })
  .then(response => response.json())
  .then(res => {
    this.setState({
      // ...
    });
  })
  .catch(error => {
    this.setState({
      market: defaultMarket,
      language: defaultLanguage,
      questions: defaultQuestions
    });
  });
...