Javascript 带挂钩的条件渲染

上下文： 我尝试构建一个带有钩子和渲染组件的表单，这取决于我们所处的步骤

问题： 我收到以下消息：“错误：UserFormHooks（…）：渲染未返回任何内容。这通常意味着缺少返回语句。或者，若要不渲染任何内容，请返回null。”

我知道代码与类一起工作，但不与钩子一起工作

我试过的：我试过把它们放在三元结构中，但也不起作用

代码：

import React, { useState } from "react";
import FormUserDetails from "./FormUserDetails";
import FormPersonalDetails from "./FormPersonalDetails";
import Confirm from "./Confirm";
import Success from "./Success";

const UserFormHooks = () => {
  const [data, setData] = useState({
    step: 1,
    firstName: "",
    lastName: "",
    email: "",
    occupation: "",
    city: "",
    bio: "",
  });

  // Proceed to next step
  const nextStep = () => {
    setData(step + 1);
  };

  // Go back to prev step
  const prevStep = () => {
    setData(step - 1);
  };

  // Handle fields change
  const handleChange = (input) => (e) => {
    setData({ [input]: e.target.value });
  };

  const { step } = { data };
  const { firstName, lastName, email, occupation, city, bio } = { data };
  const values = { firstName, lastName, email, occupation, city, bio };

  switch (step) {
    case 1:
      return (
        <div>
          <FormUserDetails
            nextStep={nextStep}
            handleChange={handleChange}
            values={values}
          />
        </div>
      );
    case 2:
      return (
        <div>
          <FormPersonalDetails
            nextStep={nextStep}
            prevStep={prevStep}
            handleChange={handleChange}
            values={values}
          />
        </div>
      );
    case 3:
      return (
        <Confirm nextStep={nextStep} prevStep={prevStep} values={values} />
      );
    case 4:
      return <Success />;
    default:
      console.log("This is a multi-step form built with React.");
  }
};

export default UserFormHooks;

import React，{useState}来自“React”；
从“/FormUserDetails”导入FormUserDetails；
从“/FormPersonalDetails”导入FormPersonalDetails；
从“/Confirm”导入确认；
从“/Success”导入成功；
const UserFormHooks=（）=>{
const[data，setData]=useState({
步骤：1，
名字：“，
姓氏：“，
电邮：“，
职业：“，
城市：“，
生物信息：“，
});
//继续下一步
常量下一步=（）=>{
设置数据（步骤+1）；
};
//返回上一步
常量prevStep=（）=>{
设置数据（步骤-1）；
};
//处理字段更改
常量handleChange=（输入）=>（e）=>{
setData（{[input]：e.target.value}）；
};
常量{step}={data}；
const{firstName，lastName，email，职业，城市，bio}={data}；
常量值={firstName，lastName，email，职业，城市，bio}；
开关（步骤）{
案例1：
返回(
);
案例2：
返回(
);
案例3：
返回(
);
案例4：
回来
违约：
log（“这是一个用React构建的多步骤表单”）；
}
};
导出默认UserFormHooks；

如消息所示，您需要从组件返回JSX。或者，如果没有返回JSX，则需要返回

null

：

default:
   console.log("This is a multi-step form built with React.");
   return null;

---

您正在使用

setData（步骤+1）

覆盖默认状态，这将把状态设置为一个数字，而不是更新在

useState

中指定的对象内的步骤值

setData((prevState) => ({
 ...prevState,
 step: prevState.step + 1,
}));

要更新状态并保留当前属性，可以将

prevState

与

setState

一起使用

setData((prevState) => ({
 ...prevState,
 step: prevState.step + 1,
}));

prevState

如名称所示，保存以前的状态，在您的情况下，它是

useState

中的对象

setData((prevState) => ({
 ...prevState,
 step: prevState.step + 1,
}));

---

您需要修复代码中的以下问题：

setData（）

将覆盖现有状态，而不是将新状态与以前的状态合并。因此，在调用

setData（）

您没有正确地分解结构。您正在使用

数据

属性创建一个新对象，该属性导致

步骤

处于

未定义状态

，从而执行

开关

语句的情况下的

默认值

。由于您没有从

default

case返回任何内容，因此会引发一个错误，因为您必须始终从组件返回某些内容

const { step } = data;
const { firstName, lastName, email, occupation, city, bio } = data;

确保从

switch

语句的

default

案例中返回一些内容

---

使用

setData

setData({ ...data, step: step + 1 });

setData（prevState=>({
…国家，
[名称]：值
}));

---

与组件类中的普通

setState

相比，带有对象的钩子的工作方式有所不同

暂时忽略您的主要问题，钩子中的状态不是这样工作的。您需要一个单独的行，如

const[firstname，setFirstname]=useState（“”）

对于每个状态变量，或者创建

数据的完整副本

，更改一个字段，然后调用

setData（changedCopyOfData）

；此外，解构赋值的工作方式类似于

const{step}=data，你所拥有的相当于
const{step}={data:data}
，其右侧有一个对象，该对象没有
步骤
属性。