Question

我有以下情况：我有个反应钩子来拍摄名为 fruit 的对象的快照并将其传递给我的子组件。

当我通过输入更改某些内容并将此更新的快照对象传递给我的子组件时，我想更新 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,
});

反应挂钩-如何将状态传递给子组件

1 个答案: