如何解决无法将 response.data 放入我的 React.js 状态?express.js
export default function Main({ match }) {
const userid = match.params.id;
const [user,setUser] = useState([]);
async function fetchuser() {
const response = await api.get('/emps/profile',{
headers: {
userid: match.params.id,},});
setUser(response.data);
console.log(response.data);
console.log(user);
}
useEffect(() => {
fetchuser();
},[match.params.id]);
在上面的代码中,response.data 被写入控制台,但用户状态为空。谁能告诉我这是为什么?
解决方法
两个建议:
- 在记录之前确定
response
是否包含任何数据。 - 将您的
fetchData
函数移动到useEffect
钩子中。 https://stackoverflow.com/a/56851963/8943092
下面是如何测试数据是否存在的示例,这里是一个 live Sandbox。
请注意,我们使用简单的条件来检查 if (myData)
是否为真。我们的 useState 钩子没有设置默认值,因此一旦数据存在,条件返回 true
。
在render方法中,我们use a ternary检查数据是否存在。
您的解决方案可能略有不同,因为您将 user
的默认值设置为空数组 []
。假设您的 API 调用返回一个数组,您将使用 if (user.length > 0)
测试数据。
import React,{ useEffect,useState } from "react";
export default function App() {
const [myData,setMyData] = useState();
useEffect(() => {
function fetchData() {
setTimeout(function () {
setMyData("I am user data");
},3000);
}
if (myData) {
console.log(myData);
} else {
console.log("No data yet");
}
fetchData();
},[myData]);
return (
<div className="App">{myData ? <p>{myData}</p> : <p>No data yet</p>}</div>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。