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

我已经为这个小小的个人挑战工作了几天（只是为了学习目的）。基本上，我想实现以下目标：

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

正如您在上面看到的，我已经能够获得钩子来从FormComponents收集数据，但是我没有得到期望的结果，因为当我调用应用程序组件上的钩子时，它没有返回正确的数据

此外，当我在屏幕上显示

newObj

数据时，它只显示来自特定表单组件的数据，而不显示来自其他表单组件的数据

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

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

到目前为止，我还不确定它为什么不起作用，甚至不知道这是否可以在React中实现。

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

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

---

以下是您描述的模式。

useCustomHook

是一个上下文提供者，表单和显示组件都是上下文使用者。虽然他们以不同的方式使用上下文，但有些人从上下文中阅读，有些人向上下文中写作。只要这四个消费者都是提供商的孩子，它就能实现您的目标。否则，您将需要像Redux这样的管理解决方案。一个“自定义钩子”只是一个打包的反应逻辑，它们本身没有什么特别之处。我没有考虑使用上下文。我要实施它，看看它会把我带到哪里。我知道钩子本身并不是什么了不起的东西。我只是想给自己一个有趣的小挑战，有教育目的。谢谢你给我指出了正确的方向。嘿，伙计，谢谢你花时间修改代码。你完全正确，使用上下文确实达到了目的。我将继续尝试上下文，看看我还能用它做些什么。就像我之前说过的，这只是一个有趣的个人挑战，帮助我了解更多关于定制挂钩的知识。多亏了你们，现在我可以开始学习更多关于上下文的知识了。

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

const { formData, setFormData } = useFormData()