时间戳

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

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

问题描述

我使用以下功能：

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. 这完美地工作。然后我在使用objlike时添加一个索引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 更新时才有效。但是当我用相同的编译代码刷新浏览器时，我得到了错误。

标签： javascriptreactjsjsondomuse-effect

解决方案

您在纯函数中使用了 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以提高效率。

推荐阅读