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

Question

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

我添加了一个语句来检查数据是否已获取，但是现在浏览器中没有任何渲染，console.log（产品）给我一个空数组，所以我知道数据设置不正确。

代码如下：

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

检查响应是否为空，代码中的其他内容是否正确。

编辑

然后设置产品（myJson.body）。因为现在YOU正在将产品设置为整个响应对象，而不是响应的主体。如果不是一系列产品，也可以从身体中设置所需内容

Answer 2

您需要等待通过这样的操作获取产品

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