英文:
Conditional render with the hook: UseState
问题
我是一名初级开发者，主要任务是创建一个事件，当您点击按钮时，它会变成另一个事件。大致如下：
在这一步，这是我做的方式，但它没有起作用：
我想知道如何有条件地呈现这两个组件，以便按照第一个GIF所示，一个接一个地进行更改。
这是我的代码：
function Event(props) {
return (
<>
<h1>新文件上传...</h1>
<p className="Message">新数据库 Jun22xls</p>
<progress value="10" max="100">
75%
</progress>
</>
);
}
function eventUpdated(props) {
return <h1>文件已成功上传</h1>;
}
function Progressbar(props) {
const [state, setNewState] = useState(true);
const isLoggedIn = props.isLoggedIn;
const HandleLogin = useCallback(() => {
setNewState((prevState) => ({ state: !prevState.state }));
}, []);
return (
<div className="Container">
{state ? <Event /> : <eventUpdated />}
<AiOutlineCloseCircle className="close-icon" onClick={HandleLogin} />
</div>
);
}
如果有人能够提供如此有用的帮助或建议，我将不胜感激。
谢谢，祝您有一个美好的一天！
英文:
I'm junior developer whose main task is to develop a event that change into another event when you click a button. Kinda this:
In step, this is how I did and it didnt work:
I wanna know how can I conditional render both component in order change one after another how the first gif implies?
This is my code:
function Event(props) {
return (
<>
<h1> Nueva carga de archivo...</h1>
<p class="Message"> Nueva base de datos Jun22xls</p>
<progress value="10" max="100">
75%
</progress>
</>
);
}
function eventUpdated(props) {
return <h1>Archivo Cargado exitosamente</h1>;
}
function Progressbar(props) {
const [state, setNewState] = useState(true);
const isLoggedIn = props.isLoggedIn;
const HandleLogin = useCallback(() => {
setNewState((prevstate) => ({ state: !state.prevstate }));
}, []);
return (
<div class="Container">
{state ? <Event /> : <eventUpdated />}
<AiOutlineCloseCircle className="close-icon" onClick={HandleLogin} />
</div>
);
}
If anyone could provide me so useful help or advice; I'd really be grateful.
Thanks and have a nice nice day!
答案1
得分: 1
你使用setNewState的方式不正确，应该这样做：
const HandleLogin = useCallback(() => {
setNewState((prevstate) => !prevstate);
}, []);
state.prevstate 假定你的 state 是一个具有属性 prevstate 的对象，但你的 state 是布尔值。
prevstate 已经是你的先前状态，所以如果 prevstate 是 true，返回 !prevstate 将会更新状态为 false。
查看文档：https://reactjs.org/docs/hooks-reference.html#functional-updates
英文:
The way you use the setNewState is not correct, you should do :
const HandleLogin = useCallback(() => {
setNewState((prevstate) => !prevstate);
}, []);
state.prevstate would assume that your state is an object with the attribute prevstate but your state is boolean.
prevstate is already your previous state so if prevstate is true returning !prevstate would update the state to false.
Check the doc here : https://reactjs.org/docs/hooks-reference.html#functional-updates
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论