如果基于对象调用 setState(Obj)，则不调用 useEffect

Question

我需要的是： 1 第一次挂载组件后，我用一个对象给了它一个状态

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

并且该选项是从另一个文件导入的：

export const option = {prop1:"prop1"}

然后，在使用效果中：

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

所以不会调用效果，因为选项对象具有相同的内存地址。 我试过这个：

useEffect(() => {
console.log("useEffect");
let newOption = Object.assign({},option);
newOption.prop1 = "newProp";
setOption(newOption);
},[newOption]);

我还添加了一个条件来避免无限循环。 但由于每次都创建 newOption ，它仍然导致无限循环。

所以一种解决方案是将条件更改为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>