时间戳

首页 > 解决方案 > 如何存储来自 Axios 响应的数据？

reactjs - 如何存储来自 Axios 响应的数据？

问题描述

我正在尝试存储 axios 响应，但方法 1 似乎是唯一有效的方法。

方法1：从状态可以正常工作

const [loadingData, setLoadingData] = useState(true);
const [data, setData] = useState([]);

  useEffect(() => {
    async function getData() {
      await axios
        .get("sampleApi")
        .then((response) => {
          setData(response.data);
          setLoadingData(false);
        });
    }
    if (loadingData) {
          getData();
        }
      }, []);

    ...

// This works fine from state
          {data.map(
              (i, index) => {
                return <p key={index}>{i.id}</p>
          }
        )}

方法 2：尝试设置为常规变量而不是状态

const [loadingData, setLoadingData] = useState(true);
  let data;


  useEffect(() => {
    async function getData() {
      await axios
        .get("sampleApi")
        .then((response) => {
          data = response.data // <====== This 
          setLoadingData(false);
        });
    }
    if (loadingData) {
          getData();
        }
      }, []);

    ...

// Following results in: Uncaught TypeError: Cannot read properties of undefined (reading 'map')
          {data.map(
              (i, index) => {
                return <p key={index}>{i.id}</p>
          }
        )}

所以，两个问题：

  1. 将数据存储在状态中是“坏习惯”吗（因为我只打算阅读它而不是修改它）
  2. 知道我在方法2中做错了什么吗？

标签： reactjsaxiosstateuse-state

解决方案

将数据存储在状态中是“坏习惯”吗

不，这就是国家的目的。

（因为我只打算阅读而不是修改它）

您正在修改它：您正在将其从默认值更改为 HTTP 请求中的值。

知道我在方法2中做错了什么吗？

这是一个常见问题解答

推荐阅读