axios React fetch在页面刷新后停止工作

jexiocij 于 2023-11-18 发布在 iOS

关注(0)|答案(2)|浏览(168)

我正在获取单个对象。当页面第一次加载时，获取的元素会呈现到DOM。当我刷新页面时，获取不再工作，我得到一个错误：
无法读取未定义的属性（阅读“name”）

的数据

import { useState, useEffect } from "react";
import axios from "axios";

function DataFetching() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    const loadProducts = async () => {
      const response = await axios.get("https://CENSORED/");
      setProducts(response.data);
    };
    loadProducts();
  }, []);

  return (
    <>
      <div className="App">
        <p>{products.product.name}</p>
      </div>
    </>
  );
}

字符串

axios

来源：https://stackoverflow.com/questions/72976524/react-fetch-stops-working-after-page-refresh

2条答案

按热度按时间

snvhrwxg1#

这是因为第一次渲染还没有产品，在获取和重新渲染组件之后，它是可用的，所以在第一次渲染中，您无法访问对象，它会抛出错误
你可以做{products?.product?.name}
或者你也可以像这样写代码

import { useState, useEffect } from "react";
import axios from "axios";

function DataFetching() {
  const [products, setProducts] = useState(null);

  useEffect(() => {
    const loadProducts = async () => {
      const response = await axios.get("https://CENSORED/");
      setProducts(response.data);
    };
    loadProducts();
  }, []);

if(!products) return <div>loading...</div>

  return (
    <>
      <div className="App">
        <p>{products.product.name}</p>
      </div>
    </>
  );
}

字符串

赞(0）回复(0）举报 2023-11-18

9lowa7mx2#

这是因为“products”状态还没有孩子，所以“name”是未定义的。
一个简单的解决方案是在呈现之前检查“products”状态中是否有“product”子状态。
就像这样：

<p>{products.product ? products.product.name : ''}</p>

字符串

赞(0）回复(0）举报 2023-11-18

我来回答

axios React fetch在页面刷新后停止工作

2条答案

相关问题

热门标签

最新问答