State возвращает предыдущее значение

Question

Прошу помощи: используя useEffect посылаю 2 запроса и полученные url(случайные фото собак) записываю в стейты randomOne и randomTwo. Потом при помощи рег.выражения извлекаю из этих url строку(породы собак) и хочу записать в стейт breed. Но в breed записываются предыдущие значения, а не новые. Я так понимаю, что это происходит из-за отложенного обновления стейтов? И как это исправить?

function App() {
  const [randomOne, setRandomOne] = useState()
  const [randomTwo, setRandomTwo] = useState()
  const [breed, setBreed] = useState([])
  const regexp = /\/+/g

  useEffect(() => {
    fetch('https://dog.ceo/api/breeds/image/random')
        .then(data => data.json())
        .then(data => {
          setRandomOne(data.message)
       }) 
    fetch('https://dog.ceo/api/breeds/image/random')
         .then(data => data.json())
         .then(data => {
            setRandomTwo(data.message)
        })
         setBreed([randomOne.split(regexp)[3], randomTwo.split(regexp)[3]])
  }, [])

Answer 1

Стоит использовать useEffect с зависимостями randomOne, randomTwo. Он будет вызван, когда значения этих переменных изменятся. Соответственно, нам надо изменять breed при условии, что randomOne и randomTwo уже получены - поэтому просто добавляем проверку.

import { useEffect, useState } from "react";

export default function App() {
  const [randomOne, setRandomOne] = useState();
  const [randomTwo, setRandomTwo] = useState();
  const [breed, setBreed] = useState([]);
  const regexp = /\/+/g;

  useEffect(() => {
    fetch("https://dog.ceo/api/breeds/image/random")
      .then((data) => data.json())
      .then((data) => setRandomOne(data.message));
    fetch("https://dog.ceo/api/breeds/image/random")
      .then((data) => data.json())
      .then((data) => setRandomTwo(data.message));
  }, []);

  useEffect(() => {
    if (randomOne && randomTwo) {
      console.log(randomOne);
      setBreed([randomOne.split(regexp)[3], randomTwo.split(regexp)[3]]);
    }
  }, [randomOne, randomTwo]);

  return <div>{breed.length > 0 && breed.map((e) => <p key={e}>{e}</p>)}</div>;
}

БЛОГ НА HUSL

State возвращает предыдущее значение

Ответы (1 шт):