преобразовать компонент класса в хуки и передать методы дочернему компоненту

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 { state } = props;

Если вы просто удалите эту строку из своей функции, слово «состояние» теперь будет ссылаться на ваша константа состояния, определенная с помощью useState (), вместо вашей вновь созданной константы, которая ссылается на props.state (которая не определена и вызывает недопустимые обращения и делает форму не отображаемой)

Значение шага однако должен быть доступен непосредственно из переменной состояния, определенной в вашем компоненте (не props.state)

---

Старый ответ, сохраняется, если кто-то найдет его с тем же сообщением

Изменить с * 1011 От *

if (state.step === 1) 

до

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

сообщение об ошибке должно прекратиться.

Ошибка возникает из-за того, что состояние не определено, и вы пытаетесь получить доступ к его полю. В примере с классом этого не происходит, потому что вы используете деструктор объекта для доступа к значению шага, поэтому он не имеет небезопасных обращений.