带钩子的条件渲染答案

【问题标题】：Conditional rendering with hooks带钩子的条件渲染
【发布时间】：2020-10-20 10:53:34
【问题描述】：

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

问题： 我收到这条消息：“错误：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;

【问题讨论】：

暂时忽略您的主要问题，钩子中的状态不会那样工作。您需要为每个状态变量创建一个单独的行，例如 const [firstname, setFirstname] = useState("");，或者创建 data 的完整副本，更改一个字段，然后调用 setData(changedCopyOfData)；
另外，解构赋值的工作方式类似于const { step } = data;，你所拥有的相当于const { step } = { data: data };，它的右侧有一个没有step 属性的对象。跨度>

标签： javascript reactjs forms react-hooks

【解决方案1】：

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

setData() 将覆盖现有状态，而不是将新状态与先前状态合并。因此，请确保在调用 setData() 时也传递先前的状态
```
setData({ ...data, step: step + 1 });
```
你没有正确解构。您正在创建一个具有data 属性的新对象，这导致step 成为undefined，因此default 执行switch 语句的情况。由于您没有从 default 案例中返回任何内容，因此会引发错误，因为您必须始终从您的组件中返回某些内容。
```
const { step } = data;
const { firstName, lastName, email, occupation, city, bio } = data;
```
确保从 default 的 switch 语句中返回一些内容

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：

【解决方案4】：

使用setData时需要使用updater功能

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

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

【讨论】：