类组件

Question

我正在尝试将下面的class component转换为function component with hooks，但到目前为止我没有成功。

我看不到页面上的任何错误，也看不到页面上的终端，但是我的目标是看到页面上的表单，但目前没有任何表单显示。

类组件

# PARENT

import React, { Component } from 'react';
import PersonalInfo from './PersonalInfo';
import AllInfo from './AllInfo';

class Main extends Component {
    state = {
        step: 1,

        firstName: '',
        lastName: '',

    }

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

    showSteps = () => {
        const {step, firstName, lastName } = this.state;

        if(step === 1)
            return (
                <PersonalInfo
                        handleChange = {this.handleChange}
                        nextStep = {this.nextStep}
                        firstName = {firstName}
                        lastName = {lastName}
                />);
        if(step === 3)
            return (
                <AllInfo
                        firstName = {firstName}
                lastName = {lastName}
    }


    render() {
        const {step} = this.state;
        return(
            <>
                <h2>Step {step} of 3.</h2>
                {this.showSteps()}
            </>
        );
    }
}

export default Main;



# CHILD

import React, { Component } from 'react';

class PersonalInfo extends Component {
    render() {
        const { handleChange, firstName, lastName } = this.props;

        return (
            <div>
                <h2>Enter your personal information</h2>
                <label>
                    <input
                        type="text"
                        name="firstName"
                        placeholder="First name"
                        value = {firstName}
                        onChange={handleChange('firstName')}
                    />
                </label>
                <label>
                    <input
                        type="text"
                        name="lastName"
                        placeholder="Last name"
                        value = {lastName}
                        onChange={handleChange('lastName')}
                    />
                </label>
            </div>
        );
    }
}

export default PersonalInfo;

功能组件

# PARENT

import React, { useState } from "react";
import PersonalInfo from './PersonalInfo';

type Props = {
  state: Object,
};

const MultiSteps = (props: Props) => {
  const [state, setState] = useState({
    step: 1,
    firstName: '',
  });

  const handleChange = (e) => {
    e.preventDefault();
    setState({...state, [input]: e.target.value});
  }

  const showSteps = () => {
    if (state && state.step === 1)
      return (
        <PersonalInfo
          handleChange = {handleChange}
          firstName = {state.firstName}
        />);

    if (state && state.step === 2)
      return (
        <AllInfo
          firstName = {state.firstName}
        />);
  }

  return(
        <>
        <h2>Step {state.step} of 3.</h2>
        Hello - {showSteps()}
        </>
  );
}

export default MultiSteps;



# CHILD

import React from "react";

const PersonalInfo = (props) => {

  return (
    <div>
      <h2>Enter personal information</h2>
      <label>
        <input
          type="text"
          name="firstName"
          placeholder="First name"
          value={props.firstName}
          onChange={handleChange('firstName')}
        />
      </label>
    </div>
  );
}

export default PersonalInfo;

当前页面和终端上都没有错误，但是我看不到页面上的任何表格。

下面的新错误

ReferenceError: handleChange is not defined

  12 |     placeholder: "First name" // value={firstName}
  13 |     ,
  14 |     value: "Lorenzo",
> 15 |     onChange: handleChange('firstName')
  16 |   })));
  17 | };
  18 |

任何帮助都会非常有帮助！

Answer 1

这里的问题是您正在函数内部创建一个名为state的新const值。

const { state } = props;

如果仅从函数中删除此行，则“ state”一词现在将引用通过useState（）定义的状态const，而不是新创建的引用props.state的const（未定义且导致无效的访问，并使表单不显示）

不过，应该直接从组件中定义的状态变量（而不是props.state）访问step值

旧答案，如果有人通过相同的消息找到它，则保留

更改自

if (state.step === 1)

到

if(state && state.step == 1)

应该使错误消息停止。

发生错误是因为状态未定义，并且您试图访问它的字段。在类示例中，它不会发生，因为您正在使用对象析构函数来访问step值，因此它没有不安全的访问。

将类组件转换为钩子，并将方法传递给子组件

类组件

功能组件

1 个答案: