作者:手机用户2502910165 | 来源:互联网 | 2022-11-21 19:26
在简单的React类组件中,我们用来更改props以这种方式声明:
constructor(props) {
super(props)
this.state = {
pitch: props.booking.pitch,
email: props.booking.email,
firstName: props.booking.firstName,
arrivalDate: props.booking.arrivalDate
}
}
但是我不知道如何在新功能中(如Hooks)执行此操作,但是我正在尝试以这种方式执行操作。
const GenerateDescHook = ({ description: initialDesc }) => {
const [description, setDescription] = useState(null)
useEffect(() => {
setDescription(initialDesc)
}, {})
function handleChangeVariance(newVariance) {
setDescription({
...description,
template: {
...description.template,
variance_name: newVariance,
},
})
}
}
基本上,我只需要更改描述道具,该道具来自另一个父组件以变为状态。请问,我能告诉我如何以新的方式像胡克斯一样去做吗?
1> Jkarttunen..:
您的代码中存在问题{}
。UseEffect挂钩期望和数组,而不是对象。使用[initialDesc]
代替。
这是在道具更改时重置组件状态的方式
const GenerateDescHook = ({ description: initialDesc }) => {
const [description, setDescription] = useState(null)
useEffect(() => {
setDescription(initialDesc)
}, [initialDesc]);
}
这是您如何在仅首次渲染时将组件状态初始化为prop值的方式
const GenerateDescHook = ({ description: initialDesc }) => {
const [description, setDescription] = useState(initialDesc);
}
这是处理属性值的外部更改的正确答案。没有这个就不会同步
2> Michiel Dral..:
您可以将初始状态作为第一个参数传递给useState
:
const GenerateDescHook = ({ description: initialDesc }) => {
const [description, setDescription] = useState(initialDesc)
...
值得注意的是,这只有在传递给`GenerateDescHook`组件的`description`属性永不改变并且OP中的代码具有相同缺点的情况下才是好的。除非您可以保证(这是IMO的危险假设),否则[this](/sf/ask/17360801/)可能是更好的答案。