使用钩子的条件呈现

Question

上下文：我尝试根据我们的步骤构建一个带有钩子和渲染组件的表单。

问题：我有此消息："错误：用户表单钩子(...(：渲染中未返回任何内容。这通常意味着缺少返回语句。或者，要不呈现任何内容，则返回 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;

Answer 1

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

1. setData()将覆盖现有状态，而不是将新状态与以前的状态合并。因此，请确保在调用setData()时也传递以前的状态

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

2. 您没有正确解构。您正在创建一个具有data属性的新对象，这会导致step被undefined，因此default执行switch语句的情况。由于您没有从default案例中返回任何内容，因此会引发错误，因为您必须始终从组件返回某些内容。

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

3. 确保从switch语句的default案例中返回一些内容

Answer 2

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

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

Answer 3

您正在用setData(step + 1)覆盖默认状态 这会将状态设置为单个数字，而不是更新您在useState中指定的对象内的步长值。

要更新状态并保留当前属性，您可以将prevState与setState一起使用。

prevState顾名思义，保持以前的状态，在您的情况下是来自useState的对象。

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

Answer 4

使用时需要使用更新程序功能setData

setData(prevState => ({
...prevState,
[name]: value
}));

与组件类中的普通setState相比，带有对象的钩子的工作方式不同