无法在 React 中首次渲染时映射获取的数据

Question

我有一个 API，returns 我有 4 个对象，我尝试将它们保存在一个名为“products”的新数组中，并将它们映射到 DOM。我的问题是地图功能在第一次渲染时不起作用。

如果我修改我的代码，保存文件并再次查看反应页面，我会看到我的数据出现。

我该如何解决？

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

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

{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);
})
})

改为

Answer 2

你正在直接改变 React 状态 no-no。

您需要使用 setProducts 状态 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

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 4

首先，您的 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 5

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

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

无法在 React 中首次渲染时映射获取的数据

Can't map fetched data on first render in React

javascript

reactjs

use-effect

use-state