错误：UserForm(...): 渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null答案

【问题标题】：Error: UserForm(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null错误：UserForm(...): 渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null
【发布时间】：2020-07-06 14:27:24
【问题描述】：

import React, { Component } from 'react';

import FormUserDetails from './FormUserDetails';

export class UserForm extends Component {
  state = {
    Step: 1,
    firstName: '',
    lastName: '',
    email: '',
    occupation: '',
    city: '',
    bio: '',
  };

  // next step

  nextStep = () => {
    const { step } = this.state;
    this.setState({
      step: step + 1,
    });
  };

  // go back to previous

  Step = () => {
    const { step } = this.state;
    this.setState({
      step: step - 1,
    });
  };

  // handle field

  handleChange = input => e => {
    this.setState({ [input]: e.target.value });
  };

  render() {
    const { step } = this.state;
    const { firstName, lastName, email, occupation, city, bio } = this.state;
    const values = { firstName, lastName, email, occupation, city, bio };

    switch (step) {
      case 1:
        return (
          <FormUserDetails
            nextStep={this.nextStep}
            handleChange={this.handleChange}
            values={values}
          />
        );

      case 2:
        return <h1>FormPersonalDetails</h1>;

      case 3:
        return <h1>Confirm</h1>;

      case 4:
        return <h1>Success</h1>;
    }
  }
}

export default UserForm;

【问题讨论】：

标签： reactjs

【解决方案1】：

如果您查看初始状态，这就是您所写的

state = {
    Step: 1,

Step 与step 不同。

JS 区分大小写。所以当它点击渲染时，step 的值是undefined。

由于没有任何 switch 语句因此而通过，它返回 undefined 并且您会看到错误。

同时添加一个默认大小写以防万一您使用switch

switch (step) {
      case 1:
        ....
      default: 

         return <div>step does not match</div>
}

【讨论】：