React：异步和等待不适用于 fetch

Question

我在 Node 服务器上有 API，在调用时返回这样的 JSON：

{"result":[{"ProductID":1,"ProductName":"iPhone10","ProductDescription":"Latest smartphone from Apple","ProductQuantity":100}]}

我正在尝试使用 fetch API 和 React 向用户显示所有这些信息，但无论我的调用返回什么

undefined

。这是我的 React 代码：

const [products, setProducts] = useState({})

async function getProducts() {
    await fetch(`http://127.0.0.1:5000/listProducts`)
    .then(response => response.json())
    .then(response=>{
      setProducts({products:response.result})
      console.log(response.result);
      products.map(products =>
        <h1>{products.ProductName}</h1>
        <h1>{products.ProductDescription}</h1>
        )
    })
    .catch(err=>console.error(err))
  }

函数 getProducts() 在页面加载时被调用一次。我做错了什么？预先感谢。

Answer 1

试试这个会有效果的

const handleFetchData = async () => {
    const response = await fetch(`https://api.unsplash.com/photos/random?client_id=${process.env.NEXT_PUBLIC_UNSPLASH_API_ACCESS_KEY}`);
    const data = await response.json();
    console.log(data);
}

useEffect(() => {
    handleFetchData();
},[])

Answer 2

你的函数做错了:

• 名称应该是

  getAndSetProducts

  甚至

  setProducts

  /

  initProducts

  因为它返回

  Promise<void>

  因为你实际上没有返回任何东西 ;
• 您正在

  products

  中设置一个对象

  { products: Product[] }

  ，我认为您只需要

  Product[]

  （一系列产品），否则您必须通过执行

  products.products

  ;
来获取产品
• 地图是无用的，因为你没有对地图响应做任何事情，再加上地图中的变量

  products

  会覆盖导入的变量（稍后可能会导致一些错误）。

尝试做：

const [products, setProducts] = useState([]); // Array instead of object

async function initProducts() {
    await fetch(`http://127.0.0.1:5000/listProducts`)
        .then(response => response.json())
        .then(response => {
            setProducts(response.result);
            console.log(response.result);
        )
        .catch(err => console.error(err));
}

function getProductsHtml() {
    return products.map(product =>
        <h1>{product.ProductName}</h1>
        <h1>{product.ProductDescription}</h1>
    );
}

您可以在组件初始化时调用

initProducts

并在 jsx 渲染中返回

getProductsHtml

。

Answer 3

const [data, setData] = useState([]);
    useEffect(() => {
        const fetchAPI = async () => {
            const response = await fetch('http://127.0.0.1:5000/listProducts', {
                method: 'GET',
            }).catch((err) => ('Error', console.error(err)));
            const data = await response.json();
            setData(data);
        };
        fetchAPI();
    }, []);
    return (
        <div className='App'>
            <ul>
                {data.map((items) => (
                    <li key={items.id}>{items.title}</li>
                ))}
            </ul>
        </div>
    );

Answer 4

试试这个...

 const [products, setProducts] = useState({})

  React.useEffect(() => {
    const fetchData = async () => {
      const result = await fetch('http://127.0.0.1:5000/listProducts')

        // console log here to determine how to set products
      console.log(result)
      setProducts(result)
    }

    fetchData()
  }, [])

  React.useEffect(() => {
   if (!!products) {
     // here you could access products!
    }
  }, [products])

  if (!products) return null

  return products.map((product) => (
    <>
      <h1>{products.ProductName}</h1>
      <h1>{products.ProductDescription}</h1>
    </>
  ))

Answer 5

如果您使用异步，那么您可以使用response.status，如下所示

 const response =  await fetch("URL", {
      body:BODY_DATA,
      method:'POST',
      headers: { "Content-Type": "application/json"
    });

if(response.status === 200){
// Complete your action
} else {
// Show error
}

Answer 6

您不能将

async await

与

.then()

一起使用，您只能使用

async await

或

.then()