Где извлеченные данные сохраняются в React? - PullRequest
Новая
       7

Где извлеченные данные сохраняются в React?

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

Я пытаюсь понять этот фрагмент кода на внутреннем уровне c: 

fetchAllData(){
    fetch('http://ec2-x-x-xx-xx.xx-west-x.compute.amazonaws.com:3001/', {mode: "no-cors"})
    .then(res => {
        return res.json();
    })

, чтобы лучше понять простой компонент, подобный этому: 

componentDidMount() {
    this.fetchAllData();
}

fetchAllData(){
    fetch('http://ecx-x-x-xxx-xx.xx-west-x.compute.amazonaws.com:3001/', {mode: "no-cors"})
    .then(res => {
        return res.json();
    })
    .then(resJson => {
        this.setState(prevState => {
            return{
                fetchDataLoaded: true,
                fetchData: resJson.data.todolist,
            };
        });
    });
}
  • При извлечении из API данные временно сохраняются в функции res => и связываются с использованием .then?
  • Если это так, как я могу визуализировать (возможно, в консоли?) Свойства данных

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

Я новичок в React и подробно объяснение очень поможет, спасибо.

Ответы [ 2 ]

1 голос
/ 01 апреля 2020

В данном примере переменная resJson содержит тело ответа, проанализированное JSON (то есть этот фрагмент кода работает, только если API возвращает ответ JSON).

Добавление к @drew, это .then(...).then(...) называется Promise Chaining. Это полезный способ создания потока, в котором вы можете обрабатывать данные поэтапно, а затем, в конце концов, исправлять ошибки.

Как ссылка, эти две страницы, несомненно, помогут

  1. основы обещаний
  2. цепочка обещаний
1 голос
/ 01 апреля 2020

Это вообще не реакция, а скорее javascript и обещания. fetch возвращает выполненное обещание. Ответ сам по себе не «сохраняется» в res, а скорее передается функции, в которой вы назвали параметр res. Если вы хотите просмотреть необработанный ответ res, вы можете сделать это в первом цепочке then, гарантируя, что вы все равно вернете обещание json для следующего отображаемого элемента. 

fetch('http://ec2-3-8-196-93.eu-west-2.compute.amazonaws.com:3001/', {mode: "no-cors"})
  .then(res => {
    console.log('res', res);
    return res.json();
  })

Возможно, это будет немного яснее сломался немного. Разложите анонимную встроенную функцию в именованную и передайте , что , в качестве возможного обратного вызова. Результат выборки в действительности нигде не сохраняется (он технически находится в памяти * в куче браузера, но это еще одна топика c) и просто передается функции. 

const logResultAndReturnJson = result => {
  console.log('result', result);
  return result.json();
};

fetch('http://ec2-3-8-196-93.eu-west-2.compute.amazonaws.com:3001/', {mode: "no-cors"})
  .then(logResultAndReturnJson)

Если вам нужно манипулировать извлеченными данными, то вам, скорее всего, нужно посмотреть на разрешенный JSON объект , а не объект ответа.

...