如何使用钩子 React 将本地 JSON 数据设置为状态

Question

我是 React 新手，并试图掌握函数组件中的钩子。 我的应用程序公共目录中的本地 .json 文件中有一个 Products 对象数组。在我的 src 目录中，我有我的 Products 组件。我需要将 .json 数据带入该组件并在页面上呈现。 我使用 useState() 挂钩来设置产品和 setProducts 常量。然后我使用 getData 函数获取 json 数据，该函数使用该数据调用 setProducts（我认为）。 getData() 在 useEffect 挂钩中调用。然后我使用 .map 函数将其渲染到页面。

我添加了一条语句来检查是否已获取数据，但是现在浏览器中没有呈现任何内容，并且 console.log(products) 为我提供了一个空数组，因此我知道数据设置不正确。

代码如下：

import React, { useState, useEffect } from 'react';

export default function Products() {

    const [products, setProducts]=useState([]);
    const getData=()=>{
      fetch('data.json'
      ,
      {
        headers : { 
          'Content-Type': 'application/json',
          'Accept': 'application/json'
         }
      }
      )
        .then(function(response){
          console.log(response)
          return response.json();
        })
        .then(function(myJson) {
           console.log(myJson);
          setProducts(myJson)
        });
    }
    useEffect(()=>{
      getData()
    },[])

    return (
        <div>
            <ul className="products">
                {products.length > 0 && products.map(product => (
                    <li key={product._id}>
                        <div className="product">
                            <a href={"#" + product._id}>
                                <img src={product.image} alt={product.title} />
                                <p>
                                    {product.title}
                                </p>
                            </a>
                            <div className="productPrice">
                                <div>
                                    {product.price}
                                </div>
                                <button className="button primary">
                                    Add to cart
                                </button>
                            </div>
                        </div>
                    </li>
                ))}
            </ul>
        </div>
    );
}

Answer 1

您需要等待通过执行此类操作来获取产品

<ul className="products">
  { products.length > 0 && products.map(product => (
     <li key={product._id}>
     // ...
  }
</ul>

Answer 2

检查响应是否不为空，代码中其他所有内容都正确。

编辑

然后设置产品（myJson.body）。因为现在你正在将产品设置为整个响应对象而不是响应的主体。 或者如果不是产品数组，则从正文中设置您需要的内容