![](/img/trans.png)
[英]How to use useEffect() to fetch data from an api in a useReducer() and useContext() state management setup?
[英]How to better setup fetch with useEffect?
我正在學習 JS 和 React,我來到下面的代碼示例和一些我不理解的部分。 second.then 在 useUffect 里面這樣可以嗎,還是在 getData func 里面更好? 渲染中還有數據**?**.map,我不明白我們為什么需要?,這是三元運算符嗎? 所以我認為三元運算符需要:作為第二個參數。 提前致謝!
import React, { useState, useEffect } from "react";
const FetchData = () => {
const [data, setData] = useState(null);
const fetchURL = "https://jsonplaceholder.typicode.com";
const getData = () => fetch(`${fetchURL}/posts`)
.then((res) => res.json());
useEffect(() => {
getData().then((data) => setData(data));
}, []);
return (<div>
{data?.map(item => (
<ul>
<li>{item.title}</li>
</ul>
))}
</div>);
};
export default FetchData;
我認為,您的代碼很好,如果有任何錯誤,請將getData and fetchURL
移動到useEffect
中。
此外,您可以簡單地使用async/await
方法。
import React, { useState, useEffect } from "react";
const FetchData = () => {
const [data, setData] = useState(null) // here you can define `[]` if you don't want to check `?`
useEffect(() => {
const fetchURL = "https://jsonplaceholder.typicode.com";
const getData = async () => {
const res = await fetch(`${fetchURL}/posts`)
const result = await res.json();
setData(result);
}
getData()
}, []);
return (<div>
{data?.map(item => (
<ul>
<li>{item.title}</li>
</ul>
))}
</div>);
};
export default FetchData;
?
稱為可選鏈運算符,它將幫助您檢查值是否為空值(null or undefined)
。
基本上,它只是在做if (data) { data.map...}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.