Tengo una función simple en una aplicación que estoy creando usando reaccionar, que agrega un campo de texto de formulario en un onClick event . Estoy usando map() para agregar más campos a medida que el usuario hace clic en el "botón Agregar". El map() vuelve a sintonizar el campo de texto del formulario dos veces cuando necesito que solo regrese una vez cuando el usuario hace clic en el add employees button . ¿Cómo puedo editar el código para que regrese solo en el campo de texto?
import { React, useState } from "react"; import { Button, Form } from "react-bootstrap"; import { Col } from "react-bootstrap"; import { Row } from "react-bootstrap"; const EmployeeName = () => { const [input, setInput] = useState([{ empName: "" }]); const AddInputField = () => { setInput([...input, { empName: "" }]); }; const RemoveInput = (i) => { const inputList = [...input]; inputList.splice(i, 1); setInput(inputList); } return ( <> {input.length === 1 ? ( <Button style={{ display: "inline" }} onClick={AddInputField}> click here to add company employees </Button> ) : ( <Button style={{ display: "none" }}> click here to add company employees </Button> )} {input.length !== 1 && input.map((value, i) => { return ( <Row> <Col> <Form.Group> <Form.Control key={i} value={value.empName} name="empName" type="text" placeholder="Add Employee Name" /> </Form.Group> </Col> <Col> <Button onClick={AddInputField} > Add </Button> <Button onClick={() => RemoveInput(i)} > Remove </Button> </Col> </Row> ); })} </> ); }; export default EmployeeName;Cambiando setInput([...input, { empName: "" }]); to setInput(prevState => [...prevState, { empName: "" }]); puede ayudar. Las actualizaciones de estado son asincrónicas, por lo que cuando actualiza en función del estado anterior, es mejor pasar una función en lugar de un valor.
Creo que tengo su código trabajando aquí en un entorno limitado de código.
Su problema fue que inicializó su estado con un objeto de entrada que no se mostraba hasta que agregó un segundo objeto de entrada ("duplicado") que luego se representó.
Para solucionar esto , todo lo que hice fue establecer el estado inicial en una matriz vacía,
const [input, setInput] = useState([]);y cambie la lógica condicional para compensar las diferentes longitudes.
{input.length < 1 ? ( <Button style={{ display: "inline" }} onClick={AddInputField}> click here to add company employees </Button> ) : ( <Button style={{ display: "none" }}> click here to add company employees </Button> )} {input.length > 0 && input.map((value, i) => { return ( <Row> <Col> <Form.Group> <Form.Control key={i} value={value.empName} name="empName" type="text" placeholder="Add Employee Name" /> </Form.Group> </Col> <Col> <Button onClick={AddInputField}>Add</Button> <Button onClick={() => RemoveInput(i)}>Remove</Button> </Col> </Row> ); })}