Многоразовый компонент в бесконечном цикле React - PullRequest
Новая
       20

Многоразовый компонент в бесконечном цикле React

1 голос
/ 18 апреля 2019

Я пытаюсь создать фиктивный проект, который "добавляет сотрудника" с реакции.Я использовал форму с 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()
 }

 handleChange = ({ 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.handleChange}
             />

             <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.handleChange}
             />
           </div>
           <div className="column">
             <Input
               name="meliCode "
               label="Meli Code"
               value={Employee.MeliCode}
               onChange={this.handleChange}
             />
           </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

1 Ответ

2 голосов
/ 18 апреля 2019

Вы рекурсивно используете компонент 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>
  )
}
...