Проблема с fetch в useEffect

@Юрий 1989 · Регистрация: 17.07.2018

Студворк — интернет-сервис помощи студентам

Здравствуйте, подскажите пожалуйста. Как правильно использовать fetch в реакт, когда есть несколько url адресов.
При таком коде, в состояние попадают всего 2 элемента. Хотя запросов 3.
Заранее благодарю всех, кто откликнулся.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
const cities = [
        "Элиста", "Астрахань", "Ставрополь"
    ];
 
    let [warm, setWarm] = useState([]);
    let [normal, setNormal] = useState([]);
    let [cold, setCold] = useState([]);
 
    useEffect(() =>{
        for (let i = 0; i < cities.length; i++) {
            let apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${cities[i]}&units=metric&appid=***`;
            fetch(apiUrl)            
                .then(resp => resp.json())
                .then(response =>{
                    //tmp.push(response);
                    if(response.main.temp > 10 && response.main.temp < 25)
                    {
                        //let copyNorm = Object.assign([], normal);
                        let copyNorm = normal.map(item => item);
                        console.log(copyNorm);
                        copyNorm.push(response);
                        setNormal(copyNorm);
                    }
                    else if(response.main.temp > 25){
                        //let copyWarm = Object.assign([], warm);
                        let copyWarm = warm.map(item => item);
                        console.log("42" + copyWarm);
                        copyWarm.push(response);
                        setWarm(copyWarm);
                    }
                    else{
                        //let copyCold = Object.assign([],cold);
                        let copyCold = cold.map(item => item);
                        copyCold.push(response);
                        setCold(copyCold);
                    }
                });
        }
    },[]);

krvsa · 04.07.2022, 11:01

Сообщение от Юрий 1989

в состояние попадают всего 2 элемента. Хотя запросов 3

Тут кагбэ нужно знать какие ответы приходят...
Ведь не только fetch асинхронный, но и сама запись в стейт так же асинхронна.

fetch можно работать одновременно или последовательно.
Для этого нужно понять какую логику ты хочешь получить в итоге...

@Юрий 1989 · 04.07.2022, 11:10 **[ТС]**

Весь смысл в том, чтобы при загрузке страницы, делались запросы по нескольким адресам, и чтобы все данные после запроса были в одном массиве. Массив потом сортируется по критериям и обновляют состояние. А ответы приходят в формате json.

@mr_dramm · 04.07.2022, 11:15

Всегда смотрите в консоль ошибок браузера там найдутся все ответы

#

используйте Ref вместо state, вы используйте useEffect без зависимостей, state в таком хуке не обновляются, а ref обновляются.

JavaScript
1
2
3
  const warm = React.useRef([]);
  const norm = React.useRef([]);
  const cold = React.useRef([]);

с ref нужно работать через свойтво current в котором в данном случае лежит массив javascript т.е. warm.current.push()

стейты нужны для того чтобы обновлять jsx то что вы рендерите

#

fetch нужно проверять на ошибки вызывая catch

JavaScript
1
2
3
4
5
6
      fetch(apiUrl(cities[i]))
        .then((resp) => resp.json())
        .then((response) => {
          console.log(response);
        })
        .catch((err) => console.log(err.message));

#

В этой ссылке не хватает ключа авторизации (это вот appid=***), может вы его скрыли, сейчас получаете

JSON
1
{cod: 401, message: "Invalid API key. Please see http://openweathermap.org/faq#error401 for more info."}

и еще нужно кодировать контент потому что русские буквы с помощью encodeURIComponent

JavaScript
1
`https://api.openweathermap.org/data/2.5/weather?q=${cities[i]}&units=metric&appid=***`;

как то так

JavaScript
1
2
3
4
let apiUrl = (city) =>
  `https://api.openweathermap.org/data/2.5/weather?q=${encodeURIComponent(
    city
  )}&units=metric&appid=***`;

#

В итоге

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import "./styles.css";
import React from "react";
 
const cities = ["Элиста", "Астрахань", "Ставрополь"];
let apiUrl = (city) =>
  `https://api.openweathermap.org/data/2.5/weather?q=${encodeURIComponent(
    city
  )}&units=metric&appid=***`;
 
export default () => {
  const warm = React.useRef([]);
  const norm = React.useRef([]);
  const cold = React.useRef([]);
 
  React.useEffect(() => {
    for (let i = 0; i < cities.length; i++) {
      fetch(apiUrl(cities[i]))
        .then((resp) => resp.json())
        .then((response) => {
          console.log(response);
          //warm.current.push()
        })
        .catch((err) => console.log("Error: ", err.message));
    }
  }, []);
  return <></>;
};

свою логику сами допишите

@Юрий 1989 · 04.07.2022, 11:23 **[ТС]**

В консоли браузера ошибок не было. (Не из-за catch, просто убирал, забыл вернуть)
Ref не пробовал, но попробую спс.
Кодирование русских букв необязательно, сервер распознаёт запросы.
В целом спасибо, попробую данный вариант подстроить.

@mr_dramm · 04.07.2022, 11:56

немного поменял ответ

если нужно обновлять стейты и знать текущее состояние делайте так

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import "./styles.css";
import React from "react";
 
const cities = ["Элиста", "Астрахань", "Ставрополь"];
let apiUrl = (city) =>
  `https://api.openweathermap.org/data/2.5/weather?q=${encodeURIComponent(
    city
  )}&units=metric&appid=***`;
 
export default () => {
  const [stateWarm, setWarm] = React.useState([])
  const warm = React.useRef([]);
  
 
 
  React.useEffect(() => {
    for (let i = 0; i < cities.length; i++) {
      fetch(apiUrl(cities[i]))
        .then((resp) => resp.json())
        .then((response) => {
          console.log(response);
          const valFromResponse = []
          // так устанавливает стейт для того чтобы он обновился в jsx
          setWarm(valFromResponse )
          // устанавливаем значение которое поможет решить проблему с ассинхронностью
          warm.current = valFromResponse 
          // так читаем текущее состояние где - то в другом месте хука
          if(warm.current){
            // 
          }
        })
        .catch((err) => console.log(err.message));
    }
  }, []);
  return <>{stateWarm}</>;
};

setWarm в отличие от stateWarm всегда постоянная

Добавлено через 6 минут
Еще нужно учитывать что пред запрос может завершиться после следующего

Новые блоги и статьи Все статьи Все блоги /
Первый деплой lagorue 17.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит токи на L и напряжения на C в установ. режимах до и. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@Юрий 1989 0 / 0 / 0 Регистрация: 17.07.2018 Сообщений: 31
	04.07.2022, 11:10 [ТС]
	Весь смысл в том, чтобы при загрузке страницы, делались запросы по нескольким адресам, и чтобы все данные после запроса были в одном массиве. Массив потом сортируется по критериям и обновляют состояние. А ответы приходят в формате json. 0

@Юрий 1989 0 / 0 / 0 Регистрация: 17.07.2018 Сообщений: 31
	04.07.2022, 11:23 [ТС]
	В консоли браузера ошибок не было. (Не из-за catch, просто убирал, забыл вернуть) Ref не пробовал, но попробую спс. Кодирование русских букв необязательно, сервер распознаёт запросы. В целом спасибо, попробую данный вариант подстроить. 0