1

我遇到了父组件和子组件之间的通信问题。

我希望父母（主机）保持自己的状态。我希望孩子（来宾）通过该状态并对其进行修改。孩子有他的本地版本的状态，可以改变孩子想要的任何东西。然而，一旦孩子玩完状态，他就会将它传递给父母以实际“保存”实际状态。我将如何正确实现这一点？

我的代码中的问题：

  • 在 updateGlobalData 处理程序上，我记录了 data 和 newDataFromGuest ，它们是相同的。我希望 data 代表旧版本的数据， newDataFromGuest 代表新版本

  • updateGlobalData 被称为 2X。我可以通过从 useEffect 内部的 deps 数组中删除 updateGlobalData ref 来解决这个问题，但我不想搞砸它。

我想要的结果应该是：

  • 数据状态应该保留旧数据，直到调用 updateGlobalData
  • 当我单击按钮时，我希望 updateGlobalData 只被触发一次

来自 Codesandbox 的代码：

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

1 回答 1

2

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

  • 问题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% 肯定）这是因为来宾中的 localData 使用与来自主机的数据相同的引用进行初始化。因此，如果您直接在 Guest 中更改它，它也会在 Host 中更改。只需将本地数据的值加 1 即可更新访客状态，而无需使用 ++ 运算符。像这样：

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

如果您发现任何与您想要的不匹配的东西，请告诉我，我会重新检查。

我希望它有所帮助。

最好的，马克斯。

于 2019-09-05T13:40:09.913 回答