Whats the total number of ps in:
Q: State возвращает предыдущее значение Прошу помощи: используя 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]])
  }, [])


A: Стоит использовать 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>;
}


user
I counted twenty-seven "p"s in that text.
assistant