Я новичок в React. Цикл for используется для получения данных с URL-адреса с разными идентификаторами. Объект из данных содержит одинаковые ключи и разные значения. Я хочу сохранить эти данные ...

-1
ewef 6 Апр 2021 в 02:33

1 ответ

Лучший ответ

axios.get является асинхронным, и операторы console.log выполняются до разрешения обещаний. Я бы рекомендовал прочитать этот ответ, чтобы получить лучшее понимание.

Вы можете создать массив обещаний и ожидать их, используя await Promise.all(...) для получения всех ответов, а затем вызвать setData с новым состоянием. Вы также должны установить начальное состояние в пустой массив.

const [data, setData] = useState([])

useEffect(() => {
  const fetchData = async () => {
    const ids = [1, 2, 3]
    const responses = await Promise.all(
      ids.map((id) => axios.get(`http://myURL/${id}`))
    )
    setData(responses.map((res) => res.data))
  }

  fetchData()
}, [])

Если вы настроили eslint-plugin-react-hooks < / a>, отобразится предупреждение о добавлении setData в массив зависимостей, поскольку от него зависит эффект. Его можно добавить, так как ссылка на функцию не изменится при повторном рендеринге.

useEffect(() => {
  const fetchData = async () => {
    const ids = [1, 2, 3]
    const responses = await Promise.all(
      ids.map((id) => axios.get(`http://myURL/${id}`))
    )
    setData(responses.map((res) => res.data))
  }

  fetchData()
}, [setData])
1
Arun Kumar Mohan 5 Апр 2021 в 23:54