Question

上下文：我对 React 还很陌生，所以我可能会以错误的方式处理这个问题，但是我有一个父页面，其中包含两个具有不同形式的组件。当第一个表单完成时，我需要第一个表单的文档 ID 才能在第二个表单中使用。为此，我尝试将两者的逻辑放在父表单中，但为了能够在提交后隐藏第一个表单，它位于一个单独的文件中并作为组件导入

无论如何，要做到这一点，我正在尝试将如下所示的 State Hook 作为道具传递

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

Answer 1

function Part1(handleSubmit, zData, setzData) {

道具作为单个参数传递给组件，而不是多个。所以你所说的 handleSubmit 实际上是 props 对象，而其他的则是未定义的。

您可以使用单个参数（可能将其重命名为 props），并访问其上的属性：

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

或者你可能想要做的是将对象destructure转化为局部变量：

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

我可以将 State Hook 作为 prop 传递给组件吗？

1 个答案: