[英]React conditional rendering not recognising true from state
所以我有这个简单的 function 有条件返回:
export default function App() {
const appState = useState({
signed: true,
user: {
login: null,
password: null,
rights: null,
},
});
return <div className="app">{appState.signed ? "does not" : "work"}</div>;
}
问题是代码总是返回“工作”。 state 不能使用条件渲染吗?
useState
钩子为您提供了一个包含 state 值和 setter 方法的数组。
问题是您正在访问由useState
返回的数组,而您无法访问signed
的它会导致false
,从而使文本“工作”显示
所以改为这样做
export default function App() {
const [appState, setAppState] = useState({
signed: true,
user: {
login: null,
password: null,
rights: null,
},
});
return <div className="app">{appState.signed ? "does not" : "work"}</div>;
}
useState 钩子返回一个长度为 2 的数组。
const [appState, changeAppState ] = useState({
signed: true,
user: {
login: null,
password: null,
rights: null,
},
});
...
//To change signed to true, try using the callback pattern
changeAppState ((prevAppState) => ({
...prevAppState,
signed: false
}));
//You can do this, but callback approach is safer
changeAppState ({
...prevAppState,
signed: false
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.