在reactjs中显示从不记名令牌api获取的数据

Question

我试图显示从不记名令牌 API 获取的数据，但我做不到

我可以在控制台中看到数据

这是我的代码：

  const [products, setProdcts] = useState([]);      
fetch("https://RANDOMAPI.com/api/products", {
        method: "GET",
        headers: {
          Authorization: `Bearer ${accessToken}`,
          "Content-Type": "application/json",
        },
        mode: "cors",
        cache: "default",
      })
        .then((response) => response.json())
        .then((json) => console.log(json))
        .catch((error) => console.log(error));
      console.log("response");
    
    
    {products?.length > 0 ? (
            <div className="container">
              {products.map((product) => (
                <div className="product">
                  <p>{product. Name}</p>
                </div>
              ))}
            </div>
          ) : (
            <div className="empty">
              <h2>No products found</h2>
            </div>
          )}

我不确定除了映射之外是否还有其他方式显示数据

请告诉我我是否做错了什么？

Answer 1

数据仅记录到控制台，因为这是您对数据所做的：

.then((json) => console.log(json))

调用console.log 将数据记录到控制台。它才不是对 products 状态值有任何影响。

如果您希望使用获取的数据更新该状态值，请更新状态值：

.then((json) => setProdcts(json))

这将触发使用新更新的状态数据重新渲染组件。