Question

我最近问了一个关于 React 中 useState 导致的无限循环的问题，我得到了帮助。但现在我有另一个相同代码的错误；

const [scoutMode, setScoutMode] = useState("");
const [bottomLinks, setBottomLinks] = useState([]);

useEffect(() => {

setScoutMode("weeklyProgramme");

if (scoutMode == "weeklyProgramme") {
  setBottomLinks(["x", "y"])
  console.log("weeklyprogramme");

} 
else if (scoutMode == "camp") {
  setBottomLinks(["a", "b"])
  console.log("camp");

} 

else {
  setBottomLinks(["c", "d"]);
  console.log("None")
}
console.log(bottomLinks);
}, [scoutMode])

我希望它在控制台中写入 ["x", "y"] 和 "weeklyprogramme" 因为显然第一个条件为真，但输出是这样的： picture of output

看起来它部分运行了第一个条件语句和 else 语句。有人能解释一下吗？ React 或 hook 是否会意外工作？

Answer 1

setBottomLinks() 是异步方法，因此您无法在 bottomLinks 之后立即获取 setBottomLinks() 的更新值。

    setBottomLinks(...)
    console.log(bottomLinks) // This will console old value of bottomLinks

您应该使用 useEffect 并添加一个 bottomLinks 依赖项来检查更新的状态值。

useEffect(() => {
   console.log(bottomLinks) 
}, [bottomLinks]);

React useEffect 和条件语句中的逻辑错误

1 个答案: