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

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() 定义的 state const，而不是你新创建的 const，即引用 props.state（即未定义和导致无效的访问并使表单不显示）

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

---

旧答案，如果有人找到相同的消息，请保留

改变

if (state.step === 1) 

到

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

应该让错误信息停止。

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