React hook-HowTo将状态传递给子组件

Question

我有以下场景：我有react钩子，用于拍摄名为fruit的对象的快照，并将其传递给我的子组件。

当我通过输入更改某些内容并将此更新的快照对象传递给我的子组件时，我希望更新fruit快照对象。

这是我的水果对象的一个例子

const fruit = {
id: 1,
fruit_name: 'apple'
}

这是我的ParentComponent代码

const ParentComponent = props => {
const [fruit, setFruit] = useState(props.currentFruit);
// Take snapshot of fruit
useEffect(() => {
if (fruit.id !== props.currentFruit.id) {
setFruit(props.currentFruit)
}
})
// Save changes to snapshot fruit
const changed = event => {
const prevFruit = fruit;
prevFruit[event.target.name] = event.target.value;
setFruit(prevFruit);
console.log(fruit);
// Here it seems changed !
}
return (
<ChildComponent fruit={fruit} changed={event => {changed(event)} />
)
}

这是我的ChildComponent代码

const ChildComponent = props => (
<input
type="text"
name='fruit_name'
value={props.fruit.fruit_name}
onChange={props.changed}  />
)

什么不好？是否可以更改状态并将组件传递给子组件？这是一个好方法吗？

提前感谢您的帮助！

Answer 1

在您的示例中，在将fruit传递给setFruit之前，您直接对其进行变异，因此它保持相同的引用。您必须传递一个包含更改的新对象。在您的情况下：

setFruit({
...prevFruit,
[event.target.name]: event.target.value,
});