我如何使用异步数据从节点api?

Question

我正在从node.js获取数据。所以现在获取数据有点晚了……我想这就是为什么我的控制台总是说'null':/我试了好几种方法来修理它，但一点用都没有。

我确实使用了UseState，但它最终说'null'数据。我的页面一直在说

TypeError: Cannot read property 'map' of null

这是我的反应代码:

const Start = () => {
const [isLoading, setIsLoading] = useState(false);
const dataList = null;
useEffect(() => {
const getData = async () => {
setIsLoading(true);
await axios
.post('/api/getData')
.then((res) => {
console.log(res.data.result);
// 👆 at this point, this console.log says what I exactly want.
return (dataList = res.data.result);
})
.catch((err) => console.log(err));
setIsLoading(false);
};
getData();
}, []);
if (isLoading) return <div>...Loading...</div>;
return (
<div>
      
{dataList.map((item, idx) => (
<p>{item[0].dataName}</p>
))}
    
</div>
);
};

我应该怎么做，以使用我的数据从node.js提取?数据是长而大的JSON。

Answer 1

要正确地使用React，你应该将数据保存在状态中，这样React的虚拟DOM就可以根据这些数据正确地呈现项目(针对你的情况)。

同样，使用await时不需要链接.then。

在另一个注意事项，这是奇怪的，你使用axios.post而不是axios.get来获取数据，只是一个友好的建议。

你的const dataList = null从未得到更新的原因是因为你在渲染函数中初始化它，这意味着每次状态得到更新(setIsLoading)，你的dataList被重新初始化为null

const Start = () => {
const [isLoading, setIsLoading] = useState(false);
const [dataList, setDataList] = useState([]);
useEffect(() => {
const getData = async () => {
setIsLoading(true);
const response = await axios.post('/api/getData');
setIsLoading(false);
setDataList(response.data.result);
};
getData();
}, []);
if (isLoading) {
return <div>...Loading...</div>;
}
return (
<div>
{dataList.map((item, idx) => (
<p>{item[0].dataName}</p>
))}
</div>
);
};