Многоразовый компонент в React Infinite Loop

Я пытаюсь сделать фиктивный проект, который «добавляет сотрудника» с помощью реакции. Я использовал форму с bulma css и компонентом ввода в качестве многоразового компонента для этой формы. когда я запускаю npm start, он успешно скомпилирован, но страница никогда не загружается, и у меня, кажется, где-то в моем коде есть бесконечный цикл. может ли кто-нибудь посмотреть код и сообщить мне, что я делаю неправильно?

import React, { Component } from 'react'
import Input from './input'

class EmployeeGeneral extends Component {
 state = {
   Employee: { FirstName: '', LastName: '', MeliCode: '' }
 }

 handleSubmit = e => {
   e.preventDefault()
 }

 handleChangeEvent = ({ currentTarget: input }) => {
   const Employee = { ...this.state.Employee }
   Employee[input.name] = input.value
   this.setState({ Employee })
 }
 render() {
   const { Employee } = this.state

   return (
     <main className = "container">
       <h1 className = "title">Employee General</h1>
       <form onSubmit = {this.handleSubmit}>
         <div className = "columns">
           <div className = "column">
             <Input
               name = "firstName"
               label = "First Name"
               value = {Employee.FirstName}
               onChange = {this.handleChangeEvent}
             />

             <div className = "control">
               <button className = "button is-primary">Add Employee</button>
             </div>
           </div>
           <div className = "column">
             <Input
               name = "lastName"
               label = "Last Name"
               value = {Employee.LastName}
               onChange = {this.handleChangeEvent}
             />
           </div>
           <div className = "column">
             <Input
               name = "meliCode "
               label = "Meli Code"
               value = {Employee.MeliCode}
               onChange = {this.handleChangeEvent}
             />
           </div>
         </div>
       </form>
     </main>
   )
 }
}

export default EmployeeGeneral

import React from 'react'

const Input = ({ name, label, onChange, value }) => {
  return (
    <div className = "field">
      <label htmlFor = {name} className = "label">
        {label}
      </label>
      <div className = "control">
        <Input
          value = {value}
          onChange = {onChange}
          autoFocus
          id = {name}
          type = "text"
          className = "input"
          placeholder = {label}
          name = {name}
        />
      </div>
      <p className = "help">{label}</p>
    </div>
  )
}

export default Input

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
140
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы рекурсивно используете компонент Input. Вместо этого измените внутренний Input на обычный input.

const Input = ({ name, label, onChange, value }) => {
  return (
    <div className = "field">
      <label htmlFor = {name} className = "label">
        {label}
      </label>
      <div className = "control">
        <input
          value = {value}
          onChange = {onChange}
          autoFocus
          id = {name}
          type = "text"
          className = "input"
          placeholder = {label}
          name = {name}
        />
      </div>
      <p className = "help">{label}</p>
    </div>
  )
}

кто ты! и спасибо, я застрял на этом как час!!! неопытный я думаю.

Amir Khadem 18.04.2019 21:57

@AmirKhadem Ха-ха, пожалуйста! Я сделал это сам раньше, поэтому я признал ошибку.

Tholle 18.04.2019 21:58

Другие вопросы по теме