объект родительского компонента изменяется без установленного состояния

Question

Что касается реакции, то мы можем изменить состояние, используя setState ie здесь setdummyData, В приведенном ниже коде Parent Component, Initialized dummyData с заголовком объекта: 2017 и передал объект дочернему компоненту и изменив объект как dummyData.header = 2018, но объект родительского компонента изменяется.

Могу ли я узнать причину этого.

Пожалуйста, обратитесь к фрагменту ниже

import React, { useState } from "react";
import Child from "./Child";

const Parent = () => {
  const [dummyData, setdummyData] = useState({ header: 2017 });
  console.log("-dummyData-", dummyData);
  return <Child dummyData={dummyData} />;
};

export default Parent;

const Child = (props) => {
  let dummyData = props.dummyData;
  dummyData.header = 2018;
  return <div> {dummyData.header} </div>;
};

export default Child;

Answer 1

dummyData является объектом, и когда вы делаете dummyData.header = 2018;, он меняет объект dummyData, поэтому в родительском изменяется значение заголовка.

Всегда обновляйте состояние, используя функцию setState , это приведет к повторной визуализации компонента и его дочерних элементов при изменении состояния

Answer 2

Вы никогда не должны изменять состояние напрямую, так как это может даже не вызвать повторную визуализацию, если вы обновляете состояние с той же ссылкой на объект.

Вы можете дать функцию в качестве первого аргумента для setValues, как и вы. используется в компоненте класса setState, и эта функция в свою очередь получит правильное состояние в качестве аргумента, а возвращаемое будет новым состоянием.

const Parent = () => {
    const [dummy, setDummy] = useState({ header: 2017 });
    return <Child dummyData={dummyData} setDummy={setDummy} />;
};

export default Parent;

const Child = props => {
    props.dummyData({ ...props.dummyData , 2018});
    return <div> {props.dummyData.header} </div>;
};

Answer 3

Вы всегда должны использовать setState для изменения состояния, а не для изменения реквизита или состояния напрямую.