React hook - Как передать состояние дочерним компонентам

Question

У меня следующий сценарий: у меня есть ответные ловушки для создания снимка объекта с именем fruit и передачи его дочерним компонентам.

Я хочу обновить Fruit объект снимка, когда я изменяю что-то через вход и передаю этот обновленный объект снимка моему дочернему компоненту.

Это пример моего fruit object

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,
});