如何解决如何在钩子中设置值
ReactJS中的钩子有问题 如您在此处看到的,我定义了一个应从子组件调用的道具 但是当我想通过调用更改组件来更改值时,它不起作用,并且我的状态没有设置。 有人能帮我吗? 不要忘记阅读评论
import React,{useState} from "react";
import Collection from "./Collection";
import ReminderPeriod from "./ReminderPeriod";
function SingleReminderPage() {
const [collection,setCollection] = useState(null);
const setSelectedCollection = (e) => {
setCollection(e);
console.log(e); // returns the true value
console.log(collection); // returns null
}
return(
<div>
<Collection onChoosed={(e) => setSelectedCollection(e)}/>
</div>
)
}
export default SingleReminderPage;
解决方法
将setState与回调函数一起使用
const setSelectedCollection = (e) => {
setCollection((state)=> {...state,e});
}
setCollection(e)-不会立即更新状态。
I want to Understand SetState and Prevstate in ReactJS
,这可能会对您有所帮助,每次收尾更新都会调用useEffect
import React,{ useState,useEffect } from "react";
import Collection from "./Collection";
import ReminderPeriod from "./ReminderPeriod";
function SingleReminderPage() {
const [collection,setCollection] = useState(null);
useEffect(() => {
console.log(collection)
},[collection])
return (
<div>
<Collection onChoosed={(e) => setCollection(e)} />
</div>
)
}
export default SingleReminderPage;
,
似乎在执行记录操作后调用setCollection来检查类似的内容,您可以在组件本身上打印收集值
import React,{useState} from "react";
import Collection from "./Collection";
import ReminderPeriod from "./ReminderPeriod";
function SingleReminderPage() {
const [collection,setCollection] = useState(null);
const setSelectedCollection = (e) => {
setCollection(e);
console.log(e); // returns the true value
console.log(collection); // returns null
}
return(
<div>
{collection}
<Collection onChoosed={(e) => setSelectedCollection(e)}/>
</div>
)
}
export default SingleReminderPage;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。