react hooks 踩坑记setState之visible
first,show my code！
index.jsx：
const [visible, setVisible] = useState(false);
{visible ? setVisible(false)}
record={record} /> : null}
Detail.jsx：
useEffect(() => {
function getDetail() {
const res = ask("getDetail", {
params: {
times: record.times,
id: record.id
}
})
if (res.errorCode === 200) {
setDetail(res.data);
} else {
message.error(res.msg|| '获取详情失败!');
}
}
getDetail();
}, []);
结果就是：如果第一次请求失败了,errorCode不是200，那详情弹框永远弹不出来。因为visible永远是true，没有改变，function不会重新render
-_-
排查了下，果断在报错后设置正确的visible，加上onClose方法：
else {
message.error(res.msg|| '获取详情失败!');
onClose();
}
成功,在报错状态下也可以正常弹框了！
总结：使用setState类的hooks一定要正确处理state,尤其是visible这类比较明显的。侧面也体现了react diff能力的强大。
发表评论 (审核通过后显示评论)：