Question

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

问题： 我收到此消息：“错误：UserFormHooks（...）：渲染未返回任何内容。这通常意味着缺少return语句。或者，不进行渲染，则返回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

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

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案例返回了一些内容

Answer 2

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

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

Answer 3

您正在用soup.find_all("div", {"class": '\\"content-review\\"'})覆盖默认状态，这会将状态设置为一个数字，而不是更新您在setData(step + 1)中指定的对象内的步长值。

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

setState就像名称所暗示的那样，保持先前的状态，在您的情况下，该状态是prevState中的对象。

useState

Answer 4

使用setData

时需要使用更新程序功能

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

与对象挂钩相比，与组件类中的常规setState而言，工作方式不同

带钩的条件渲染

4 个答案: