如何存储Axios响应中的数据?

Question

我试图存储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时做错了什么吗?

Answer 1

这是"不良做法"吗?以

状态存储数据

不，这就是国家的意义。

(因为我只打算读它而不修改它)

你正在修改它:你正在将它从默认值更改为HTTP请求的值。

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

这是一个常见问题