Reactjs 我可以将状态挂钩作为道具传递给组件吗？

上下文：我还没有反应过来，所以我可能用了错误的方法，但是我有一个包含两个不同形式组件的父页面。我需要第一个表单的文档id，当第一个表单完成后提交，以便在第二个表单中使用。为此，我尝试将这两个表单的逻辑都放在父表单中，但为了能够在提交后隐藏第一个表单，它位于单独的文件中，并作为组件导入

无论如何，为了做到这一点，我正试图通过一个像下面这样的状态钩子作为道具

const [zData, setzData] = useState({
    _id: uuidv4(),
    something: '',
    example: '',
  });

我可以毫无问题地传递zData，但是我不能传递setzData，我遇到了一个错误，说明它不是一个函数。是否有解决方法或其他解决方案

编辑 在组件上，我有这个

<Part1 handleSubmit={handleSubmit} zData={zData} setzData={setzData} />

在另一份文件上，差不多是这样

function Part1(handleSubmit, zData, setzData) {
return (<>

                <TextField
                  required
                  name="firstName"
                  label="First Name"
                  fullWidth
                  autoComplete="First name"
                  value={zData.firstname}
                  onChange={(e) => setzData({ ... zData, firstname: e.target.value })}
                />
</>);
}

功能部分1（handleSubmit、zData、setzData）{
返回(
setzData（{…zData，firstname:e.target.value}）
/>
);
}

道具作为单个参数而不是多个参数传递给组件。因此，您所称的

handleSubmit

实际上是props对象，而其他对象未定义

您可以使用单个参数（可能将其重命名为

props

），并访问其属性：

function Part1(props) {
  // ...
  value={props.zData.firstName}
  onChange={(e) => props.setzData(/*...*/)}
}

或者您可能想做的是将对象转换为局部变量：

function Part1({ handleSubmit, zData, setzData }) {

---

但是我不能通过setzData

你应该可以。你能给我们看一下你为此尝试过的代码吗？你可以，但是最好用另一个函数包装你的集合并传递那个函数。因为将集合函数传递给子级可能会导致生命周期问题。@NicholasTower当然，我已经添加了it@DanysChalifour您是否有资源知道如何做到这一点，而不会遇到函数中调用的“React Hook”useState…这既不是React函数组件，也不是自定义React Hook函数“错误”？（即使导入了useState，我也能得到它，它只显示在一个单独的函数中）

function Part1({ handleSubmit, zData, setzData }) {