reactjs - ReactJS - 使用从多个表单组件收集的数据创建单个对象的自定义钩子

问题描述

我已经为这个小小的个人挑战工作了几天（仅用于学习目的）。基本上我想要完成的是以下内容：

创建一个从多个表单组件收集数据的自定义挂钩。
获取挂钩以返回包含从表单组件收集的所有数据的新对象。
能够在任何其他组件中使用该返回的对象。

正如您在此Codesandbox上看到的那样，我已经能够获得从 FormComponents 收集数据的钩子，但是我没有得到想要的结果，因为当我在 App 组件上调用钩子时，它没有返回正确的数据。

此外，当我将newObj数据显示到屏幕上时，它只显示来自该特定 FormComponent 的数据，而不显示来自其他 FormComponent 的数据。

创建这个钩子的动机是寻找一种替代方法来避免在大型项目中进行状态钻探。我知道有几种方法可以做到这一点。但我想通过创建自定义钩子来用不同的方法解决这个问题。

问题似乎是（根据控制台日志判断）钩子正在为每个调用它的组件返回一个“不同”的对象。

到目前为止，我不确定为什么它不起作用，或者即使这可以在 React 中完成。

标签： reactjsreact-hooks

您应该使用React Context在您的应用程序中“共享”数据。首先创建上下文、提供者和钩子来访问上下文数据。

import React, { useContext, useState } from "react";

const FormContext = React.createContext();

export const useFormData = () => useContext(FormContext);

export const FormDataProvider = ({ children }) => {
  const [formData, setFormData] = useState({
    data1: "string",
    data2: "string",
    data3: "string",
    data4: "string",
    data5: "string",
    data6: "string"
  });
  const updateData = (newData) => {
    setFormData({ ...formData, newData });
  };
  return (
    <FormContext.Provider value={{ formData, setFormData, updateData }}>
      {children}
    </FormContext.Provider>
  );
};

比用创建的提供程序组件包装您的组件。

export default function App() {
  return (
    <FormDataProvider>
      <div
        className="App"
        style={{ display: "flex", justifyContent: "space-around" }}
      >
        <Form1 />
        <Form2 />
        <Form3 />
      </div>
    </FormDataProvider>
  );
}

现在您可以像这样在子项中使用创建的钩子访问上下文数据

const { formData, setFormData } = useFormData()

这是修改后的代码

reactjs - ReactJS - 使用从多个表单组件收集的数据创建单个对象的自定义钩子

问题描述

解决方案

推荐阅读