JS 编译时 React DOM 更新。但是刷新浏览器会给出错误'无法读取未定义的属性（读取'1'）'

Posted 2023-02-22

【中文标题】JS 编译时 React DOM 更新。但是刷新浏览器会给出错误\'无法读取未定义的属性（读取\'1\'）\'

【英文标题】：React DOM updates on JS compile. But refreshing browser will give error 'Cannot read properties of undefined (reading '1')'JS 编译时 React DOM 更新。但是刷新浏览器会给出错误'无法读取未定义的属性（读取'1'）'

【发布时间】：2021-11-05 05:43:03

【问题描述】：

我使用以下函数：

const useApi = url => 
    const [data, setData] = useState([]);
    const [isLoaded, setIsLoaded] = useState(false);
    const [error, setError] = useState(null);

    useEffect(() => 
        const fetchData = () => 
            axios
                .get(url)
                .then(response => 
                    setIsLoaded(true);
                    setData(response.data);
                )
                .catch(error => 
                    setError(error);
                );
        ;
        fetchData();
    , [url]);

    const obj = error, isLoaded, data
    return obj
    //return  error, isLoaded, data

我称之为：

  const obj = useApi("http://localhost:1337/home")

以下是obj 返回的内容：

  "error": null,
  "isLoaded": true,
  "data": 
    "id": 1,
    "published_at": "2021-09-08T11:33:42.926Z",
    "created_at": "2021-09-08T11:33:41.281Z",
    "updated_at": "2021-09-08T11:33:42.943Z",
    "Een": [
       "id": 1, "title": "asdasd", "content": "asdasd" ,
       "id": 2, "title": "asdasdas", "content": "asdas" ,
       "id": 3, "title": null, "content": null 
    ]
  

然后我使用带有obj.data.field 的显示特定数据。这完美地工作。然后我在使用obj 时添加一个索引，例如obj.data.field[0]。保存文件后，React 编译它，因为我使用了 React 的 useEffect ，所以 DOM 得到更新而无需刷新浏览器。数据按应有的方式正确显示。但是，一旦我刷新浏览器，我就会收到以下错误： TypeError: Cannot read properties of undefined (reading '1')

因此，刷新时也可以获取obj.data.field 之类的数据。但是一旦我添加了一个像obj.data.field[0] 这样的索引，它只在 React 编译我的代码和 DOM 更新时才有效。但是当我用相同的编译代码刷新浏览器时，我得到了错误。

【问题讨论】：

顺便说一句，您的obj.data 可能无效，因为这是一个异步调用，您需要在显示层中执行类似obj.data ? "Show me the data" : "..." 的操作。

【参考方案1】：

你在纯函数中使用了 setter 函数/useEffect，它看起来很奇怪。

看一个例子，我已经为你准备好了

import "./styles.css";
import  useState, useEffect  from "react";
import axios from "axios";

export default function App() 
    const [data, setData] = useState([]);
    const [isLoaded, setIsLoaded] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => 
        const fetchData = (url) => 
            axios
                .get(url)
                .then((response) => 
                    setIsLoaded(false);
                    setData(response.data);
                )
                .catch((error) => 
                    setError(error);
                );
        ;
        fetchData("https://api.github.com/users");
    , []);

    if (isLoaded) return <h1>Loading. . .</h1>;
    if (error) return <h1>Error. . .</h1>;

    return (
        <div className="App">
            <ul>
                data &&
                    data.length > 0 &&
                    data.map(( login ) => 
                        return <li>login</li>;
                    )
            </ul>
        </div>
    );

提示：尝试使用Async Function 以提高效率。

【讨论】：

感谢您的帮助，我已经尝试了您的代码，但仍然在 DOM 更新上它可以工作，但是一旦刷新页面，我就无法定义了。

但它工作正常。将代码带到codesnadbox.io 进行签出。我刷新了百万次，结果还是一样。