useState React未更新
useState React未更新
提问于 2020-11-20 20:40:01
我在使用react useState钩子时遇到了问题。我已经调用了backend-api，并且我想将result设置为userData。
接口调用成功，可以看到console.log(response.data)。{“消息”：“ok”，“数据”：{“id”：1，“姓名”：“hyu”，“出生”：“2000.1.1”，“性别”：0，“备注”：“test”}}
下面是代码。
import React , {useState, useEffect} from 'react';
const [userData, setUserData] = useState("");
useEffect(() => {
const getUser = async () => {
const response = await axios.get('api/babyinfo');
console.log(response.data);
setUserData(response.data);
}
getUser();
},[]);
console.log(userData); // userData is still empty有没有人知道发生了什么，我怎么才能修复它？
回答 4
Stack Overflow用户
回答已采纳
发布于 2020-11-20 21:16:07
import React , {useState, useEffect} from 'react';
const [userData, setUserData] = useState([]);
const getUser = async () => {
try {
const response = await axios.get('api/babyinfo');
console.log(response.data);
setUserData(response.data.data);
}catch(err) => {
console.log(err)
}
}
useEffect(() => {
getUser();
},[])现在，您可以对您的状态进行控制台操作，以查看您的状态是否已更新
console.log(userData);Stack Overflow用户
发布于 2020-11-20 21:10:55
代码中没有问题，只是您试图将数组作为对象进行访问。
请试试这个
import React , {useState, useEffect} from 'react';
const [userData, setUserData] = useState({});
useEffect(() => {
const getUser = async () => {
const response = await axios.get('api/babyinfo');
setUserData(response.data.data[0]);
}
getUser();
},[]);
return <span>{userData.name}</span>Stack Overflow用户
发布于 2020-11-20 20:48:06
在userData中设置初始类型[ ]，如下所示
const [userData, setUserData] = useState([]); // here页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64929658
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号