map 无法在 React 中首次渲染时获取数据

Question

我有一个 API 返回我 4 个对象，我尝试将它们保存在一个名为“产品”的新数组中，并将 map 保存到 DOM。 我的问题是 map function 在第一次渲染时不起作用。

如果我修改代码中的某些内容，保存文件并再次查看 React 页面，我会看到我的数据出现了。

我该如何解决？

import { useEffect, useState } from 'react';
import './App.css';

function App() {

  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetch("URL")
    .then(res => res.json())
    .then(data => {
      for(let i = 0; i < data.length; i++) {
        products.push(data[i])
      }
    })
  })

  console.log(products);

  return (
    <div className="App">
      {products.map((product,index) => (
        <div key={index}>{product.price}</div>
      ))}
    </div>
  );
}

export default App;

Answer 1

const [products, setProducts] = useState([]);

useEffect(() => {
    async function getdata() {      
      const res = await fetch("URL");
      const data = await res.json();
      setProducts(data)
    }

    let unmounted = false;    
    if (!unmounted) {
      getdata();
    }

    return () => unmounted = true;
}, []);

你可以试试这个，我希望它会起作用。

Answer 2

你直接改变 state 这是 React 的禁忌。

您需要改用setProducts state setter

useEffect(() => {
  fetch("URL")
    .then(async res => {
      if (!res.ok) { // don't forget to check for errors
        throw new Error(`${res.status}: ${await res.text()}`);
      }
      return res.json();
    })
    .then(setProducts) // pass the resolved data to the state setter
    .catch(console.error);
}, []); // use an empty dependency array to only run once on mount

这是一个使用JSONPlaceholder /albums API 的演示

Answer 3

首先，您在useEffect挂钩中缺少依赖数组。 假设您希望useEffect挂钩在初始渲染时运行，我将传递空依赖项数组 ( [] )。

下一个修复是您等待在产品中设置数据，如果设置了产品（即您有products.length > 0 ），则调用

useEffect(() => {
    fetch("URL")
    .then(res => res.json())
    .then(data => setProducts(data))
  }, [])

  console.log(products);

  return (
    <div className="App">
      {products.length && products.map((product,index) => (
        <div key={index}>{product.price}</div>
      ))}
    </div>
  );

Answer 4

您只需运行一次 useEffect() 然后您需要调用 setProducts

useEffect(() => {
    fetch("URL")
      .then(res => res.json())
      .then(data => {
        setProducts(data);
      })
  },[])

Answer 5

第一次渲染后获取数据。 你可能想使用

{Boolean(products.length) && products.map((product,index) => (
    <div key={index}>{product.price}</div>
  ))}

和

useEffect(() => {
fetch("URL")
.then(res => res.json())
.then(data => {
  for(let i = 0; i < data.length; i++) {
    products.push(data[i])
  }
  setProducts(products);
})
})

反而