Question

给出以下代码：

const MyComponent = ({ myObj }) => {
    const [myStatefulObj, setMyStatefulObj] = useState(myObj.subObj)

    const handleChange = () => {
        const updatedObj = { newProperty: Math.random() }
        setMyStatefulObj(updatedObj) // myObj is updated too!
    }

    return <div />
}

我正在尝试使用useState初始化一个新的本地prop，并使用从父组件传入的prop混合其初始值。

当我使用setMyStatefulObj更新道具时，一切正常，除了它还更新了传递到组件中的道具。

这是不希望有的副作用，我以前从未见过。

正在传递的道具来自父级，该父级使用react-redux的{{1}}钩子通过选择器创建了道具。

没有调度动作或执行任何操作，但是仅记录useSelector道具的值就表明确实在每次调用本地myObj方法时对其进行更新。

Answer 1

您描述的效果没有意义，我无法重现。也许您可以创建一个片段并共享它。

Answer 2

我不认为这是由hooks函数引起的。

正如您所说，我已经在CodeSandBox中创建了一个简单的示例，但显然没有复制。您可以编辑此沙箱并尝试模拟您的情况，也许您可以找到根本原因。

但是由于您使用的是redux，我建议您使用useSelector在hooks函数中选择所需的状态，这样您就不必担心这种情况了，它会有更好的性能（如果您通过道具时，每次myObj更改时，hook组件都会重新呈现。）

调用钩子的updater方法时，用于初始化useState钩子的传入道具会被更新

2 个答案: