Question

我在父子组件之间的通信存在问题。

我希望父母（主人）保持自己的状态。我希望孩子（来宾）通过该状态并对其进行修改。孩子有其状态的本地版本，可以根据孩子的意愿进行更改。但是，一旦孩子完成了该状态的播放，他就将其传递给父母以实际“保存”实际状态。我该如何正确实施呢？

从我的代码发出：

在updateGlobalData处理程序上，我记录了数据和newDataFromGuest，它们是相同的。我希望数据代表旧版本的数据，而newDataFromGuest代表新的数据
updateGlobalData被称为2X。我可以通过从useEffect内的deps数组中删除updateGlobalData ref来解决此问题，但我不想这么做。

我想要的结果应该是：

数据状态应保留旧数据，直到调用updateGlobalData
我希望在单击按钮时只触发一次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);

Answer 1

注意：下面的代码解决方案

问题1：

我希望在单击按钮时只触发一次updateGlobalData

为解决此问题，我在React.createContext和弯钩useReducer之间混合使用。这个想法是通过其上下文使主机调度程序可用。这样，您无需将“ updateGlobalData”回调向下发送给Guest，也无需使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％肯定），这是因为Guest中的localData是使用与来自Host的数据相同的引用进行初始化的。因此，如果您直接在Guest中更改它，它也会在Host中更改。只需在本地数据的值上加1即可更新Guest状态，而无需使用++运算符。像这样：

localData.foo.bar + 1

这是my solution：

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);

如果您发现任何与所需内容不符的东西，请告诉我，我会重新检查。

希望对您有帮助。

最好，最多

与useEffect通信的父级和子级组件

1 个答案: