useEffect не вызывается, если вызвать setState (Obj) на основе объекта

Question

Мне нужно: 1 после первого монтирования компонента, я присвоил ему состояние с объектом

  const [state1, setState1] = useState(option);

, и эта опция импортирована из другого файла:

export const option = {prop1:"prop1"}

и затем в useEffect:

  useEffect(() => {
    console.log("useEffect");
    option = {
      prop1:"prop1"
    };

  setOption(option);

  });

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

  useEffect(() => {
    console.log("useEffect");
    let newOption = Object.assign({},option);

    newOption.prop1 = "newProp";

    setOption(newOption);

  },[newOption]);

Я также добавляю условие, чтобы избежать бесконечного l oop. но поскольку newOption создается каждый раз, он по-прежнему приводит к бесконечному l oop.

, поэтому одним из решений является изменение условия на JSON.stringify(option), но есть ли лучший способ сделать это?

Answer 1

Если я правильно понял, попробуйте это:

// Your imported option
const option = { prop1: "prop1" }

const App = () => {
  const [state, setState] = React.useState({})

  React.useEffect(() => {
    setState({
      ...option, // copying your imported option into state
      prop2: "prop2" // setting a new state
    })
    console.log("useEffect render")
  }, [/* no dependencies run only once */])

  return (
    <div className="App">
      <h2>{state.prop1}</h2>
      <h2>{state.prop2}</h2>
    </div>
  )
}

ReactDOM.render( <App /> , document.getElementById('root'))

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>