Question

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;

Answer 1

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

state = {
    Step: 1,

Step与step不同。

JS区分大小写。因此，当它达到渲染效果时，step的值为undefined。

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

还要添加一个默认的大小写，以防万一，您正在使用switch

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

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

错误：UserForm（...）：渲染未返回任何内容。这通常意味着缺少return语句。或者，不渲染任何内容，则返回null

1 个答案: