Question

页面刷新后 React fetch 停止工作

2022-07-14

2169

javascript reactjs axios

我正在获取单个对象。当页面首次加载时，获取的元素会呈现到 DOM。当我刷新页面时，获取不再起作用，并且出现错误：

Uncaught TypeError: Cannot read properties of undefined (reading '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>
    </>
  );
}

Answer 1

这是因为第一次渲染时还没有产品，并且在获取并重新渲染组件后它才可用，因此在第一次渲染时您无法访问对象并且会引发错误

您可以执行 {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>
    </>
  );
}

Answer 2

这是因为 'products' 状态还没有子项，所以 'name' 未定义。

一个简单的解决方案是在渲染之前检查 'products' 状态中是否有 'product' 子项。

像这样：

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