En una matriz de selecciones de reacción, cualquier entrada antes de la última interrumpirá la indexación de las siguientes. Sé sobre uuid para clave (que no se recomienda) y también sobre Math.floor (Math.random() * 10000) para clave. Pero todavía no puedo hacer que esto funcione.
La clave generada con Math.floor(Math.random() * 10000) rompe la entrada: no puede completar nada en el campo.
Es un problema de indexación y creo que es un problema dentro del complemento. Necesito aclarar que este no es el problema, espero.
Creé un codesandbox con Math.floor (Math.random() * 10000) como clave para que lo veas.
https://codesandbox.io/s/codesandboxer-example-forked-dcvdj?file=/example.tsx
Agregue al menos una entrada e intente completar. No te dejará.
Coloque index en key y verá que puede completarlo, pero cuando intenta eliminarlo, el valor permanece igual y, en cambio, el que está debajo de ese se elimina (problema de indexación, lo sé). Esto se debe a que cuando se actualiza el estado, el mapa se ejecutará nuevamente y volverá a indexar la lista.
Una solución sería hacer referencia a sus valores AsyncSelect en una matriz como esta:
state = { inputValue: "", fieldsArr: [], values: [] }; En consecuencia, su función render() se vería así:
render() { return ( <div> <pre>inputValue: "{this.state.inputValue}"</pre> {this.state.fieldsArr.map((item, index) => ( <div key={index}> <span>{item}</span> <AsyncSelect cacheOptions loadOptions={this.loadOptions} defaultOptions value={this.state.values[index]} // <--- This will reference your state value onChange={(e) => this.handleChange(e, index)} onInputChange={this.handleInputChange} /> <button onClick={() => this.handleDelete(index)}>delete</button> </div> ))} <button onClick={this.handleAdd}>add</button> </div> ); } Luego agregará una devolución de llamada handleChange para manejar el evento AsyncSelect onChange .
handleChange(el, index) { let vals = this.state.values; vals[index] = el; this.setState((prev) => ({ ...prev, values: vals })); } Y finalmente edite las funciones handleDelete y handleAdd :
handleAdd = () => { let newArr = this.state.fieldsArr; let values = this.state.values; newArr.push(this.state.fieldsArr.length + 1); values.push(""); this.setState((prev) => ({ ...prev, fieldsArr: newArr })); }; handleDelete = (index) => { let newArr = this.state.fieldsArr; let values = this.state.values; newArr.splice(index, 1); values.splice(index, 1); this.setState((prev) => ({ ...prev, fieldsArr: newArr, values })); };Mi solución fue crear un contador, agregar a ese contador en el campo Agregar, luego eliminar usando indexOf item para eliminar.
https://codesandbox.io/s/codesandboxer-example-forked-dcvdj?file=/example.tsx