我是React 功能组件的初学者,我试图习惯使用React Hooks来理解 Hooks 的逻辑。就我而言;我想从名为getPlants的 API 中获取我的初始数据——我将在我的默认仪表板页面上显示这些数据。从文档中,我了解到在 react hooks 中发送 API 请求的最佳实践是在UseEffect Hook中进行 API 调用。所以我在 UseEffect 挂钩中调用我的getPlants方法,并使用名为setRows的useState挂钩设置我的响应数据。它成功设置了名为row的状态,但在那一行之后,我无法在我的名为row的状态中获取任何数据,只是一个空数组。在那之后的其他方法中,我不能使用行值导致我再次变空。那么我应该对我的行状态做些什么来获取和处理完整的数据呢?希望清楚明白。
const [rows, setRows] = useState([])
useEffect(() => {
getPlants()
}, []) //dependency array empty because ı want it to work one time (like compDidMount)
const getPlants= () =>{
fetch('http://localhost:3001/api/getPlants',{
method:'GET',
headers:{
'Content-Type':'application/json'
}
}).then(res => res.json())
.then(resultJson => {setRows(resultJson)}) //sets the state named row successfully with response data
console.log(rows) //gets an empty array
}