A continuación, estoy representando el componente <App/> con elementos secundarios como matriz de componentes <Input/> . Agregué algunas entradas usando el botón "agregar nuevo". Puedo agregar componentes de texto de entrada. Pero, cuando escribo el valor en el texto, no se muestra. No puedo modificar el objeto en la matriz de estado ya que el índice se muestra como "-1" en la función setData . Debido a esto, el valor no se muestra cuando escribimos en el cuadro de texto. Por favor, hágame saber por qué state es [] cuando estoy accediendo a la función setData .
function Input(props) { return ( <div> <label htmlFor='variable'>Name</label> <input id='variable' type='text' value={props.value} onChange={(e) => props.setData(props.id, e.target.value)} /> </div> ) } function App() { let [state, setState] = React.useState([]) let [inputs, setInputs] = React.useState([]) let setData = ((id, value) => { console.log(state); // prints [] let index = state.findIndex(ele => ele.key === id); console.log(index); // prints -1 if (!(index === -1)) { setState(state => { state[idx]["value"] = value; }) } }) let handleAdd = () => { let idx = `${new Date().getTime()}` let tempState = { "key": idx, "value": "", } setState(state => [...state, tempState]) let input = <Input key={tempState.key} value={tempState.value} id={tempState.key} setData={setData} /> setInputs(inputs => [...inputs, input]) } return ( <div> <button onClick={handleAdd}>add new</button> <div> {inputs} </div> </div> ) }Cuando crea un componente de Input dentro de handleAdd , crea un cierre y, como resultado setData obtiene el estado que existía cuando se creó el componente, sin el estado recién agregado.
En general, crear componentes y guardarlos en el estado no es un buen enfoque. En su lugar, es mejor guardar solo los datos en el estado y renderizar los componentes en función de él.
Aquí hay una forma de hacer esto, tenga en cuenta cuánto más simple es el componente y su lógica.
function App() { let [state, setState] = React.useState([]); let setData = (id, value) => { const newState = state.map((st) => { if (st.key === id) { st.value = value; } return st; }); setState(newState); }; const addInput = () => { const idx = `${new Date().getTime()}`; setState([...state, { key: idx, value: '' }]); }; return ( <div> <button onClick={addInput}>add new</button> <div> {state.map((st) => ( <Input value={st.value} key={st.key} setData={setData} id={st.key} /> ))} </div> </div> ); }