我在父组件和子组件之间的通信方面遇到问题。
我希望父(主机(保持自己的状态。我希望孩子(来宾(被传递该状态并修改它。孩子有他本地版本的状态，可以随孩子的意愿改变。但是，一旦孩子玩完状态，他就会将其传递给父母以实际"保存"实际状态。 我将如何正确实现这一点？
我的代码中的问题：
-
在updateGlobalData处理程序上，我记录了数据和newDataFromGuest，它们是相同的。我希望数据代表旧版本的数据，而newDataFromGuest代表新版本的数据
-
updateGlobalData 被称为 2X。我可以通过从useEffect中的deps数组中删除updateGlobalData ref来解决这个问题，但我不想讨厌它。
我想要的结果应该是：
数据- 状态应保存旧数据，直到调用 updateGlobalData
- 我希望在单击按钮时仅触发一次更新全局数据
来自代码沙盒的代码：
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
const Host = () => {
const [data, setData] = useState({ foo: { bar: 1 } });
const updateGlobalData = newDataFromGuest => {
console.log(data);
console.log(newDataFromGuest);
setData(newDataFromGuest);
};
return <Guest data={data} updateGlobalData={updateGlobalData} />;
};
const Guest = ({ data, updateGlobalData }) => {
const [localData, setLocalData] = useState(data);
const changeLocalData = newBarNumber => {
localData.foo = { bar: newBarNumber };
setLocalData({ ...localData });
};
useEffect(() => {
updateGlobalData(localData);
}, [localData, updateGlobalData]);
return (
<div>
<span>{localData.foo.bar}</span> <br />
<button onClick={() => changeLocalData(++localData.foo.bar)}>
Increment
</button>
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<Host />, rootElement);
注意：下面的代码解决方案
- 问题1：
我希望在单击按钮时仅触发一次更新全局数据
为了解决这个问题，我在 React.createContext 和钩子 useReducer 之间混合使用了。这个想法是使主机调度程序通过其上下文可用。这样，您就不需要将"updateGlobalData"回调向下发送给来宾，也不需要使useEffect钩子依赖于它。因此，useEffect将只触发一次。
但请注意，useEffect 现在依赖于主机 dipatcher，您需要将其包含在其依赖项中。尽管如此，如果您阅读有关 useReducer 的第一个注释，调度程序是稳定的，不会导致重新渲染。
- 问题2：
状态应保存旧数据，直到调用 updateGlobalData
解决方案很简单：不要直接更改状态数据！！请记住，Javascript中的大多数值都是通过引用传递的。如果您将数据发送给来宾并直接对其进行修改，如下所示
const changeLocalData = newBarNumber => {
localData.foo = { bar: newBarNumber }; // YOU ARE MODIFYING STATE DIRECTLY!!!
...
};
和这里
<button onClick={() => changeLocalData(++localData.foo.bar)}> // ++ OPERATOR MODIFYES STATE DIRECLTY
它们也将在主机中被修改，除非您通过 useState 挂钩更改该数据。我认为(不是 100% 确定(这是因为来宾中的 localData 使用与来自主机的数据相同的引用进行初始化。因此，如果您直接在来宾中更改它，它也将在主机中更改。只需将 1 添加到本地数据的值即可更新 Guest 状态，而无需使用 ++ 运算符。喜欢这个：
localData.foo.bar + 1
这是我的解决方案：
import React, { useState, useEffect, useReducer, useContext } from "react";
import ReactDOM from "react-dom";
const HostContext = React.createContext(null);
function hostReducer(state, action) {
switch (action.type) {
case "setState":
console.log("previous Host data value", state);
console.log("new Host data value", action.payload);
return action.payload;
default:
throw new Error();
}
}
const Host = () => {
// const [data, setData] = useState({ foo: { bar: 1 } });
// Note: `dispatch` won't change between re-renders
const [data, dispatch] = useReducer(hostReducer, { foo: { bar: 1 } });
// const updateGlobalData = newDataFromGuest => {
// console.log(data.foo.bar);
// console.log(newDataFromGuest.foo.bar);
// setData(newDataFromGuest);
// };
return (
<HostContext.Provider value={dispatch}>
<Guest data={data} /*updateGlobalData={updateGlobalData}*/ />
</HostContext.Provider>
);
};
const Guest = ({ data /*, updateGlobalData*/ }) => {
// If we want to perform an action, we can get dispatch from context.
const hostDispatch = useContext(HostContext);
const [localData, setLocalData] = useState(data);
const changeLocalData = newBarNumber => {
// localData.foo = { bar: newBarNumber };
// setLocalData({ ...localData });
setLocalData({ foo: { bar: newBarNumber } });
};
useEffect(() => {
console.log("useEffect", localData);
hostDispatch({ type: "setState", payload: localData });
// updateGlobalData(localData);
}, [localData, hostDispatch /*, updateGlobalData*/]);
return (
<div>
<span>{localData.foo.bar}</span> <br />
<button onClick={() => changeLocalData(localData.foo.bar + 1)}>
Increment
</button>
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<Host />, rootElement);
如果您发现任何与您想要的不匹配的内容，请告诉我，我会重新检查。
我希望它有所帮助。
最好 麦克斯。