Tengo una entrada personalizada con selección de tipo, onChange está ejecutando un setState.
mi objeto de estado se ve así
const [upload, setUpload] = useState({ uploadType: 'files', selectHeader: [], defaultFields: [ { baseField: 'First name', }, { baseField: 'Last name', }, { baseField: 'Phone number', }, { baseField: 'Company', }, { baseField: 'Email', }, ] });Cuando se ejecuta onChange, estoy agregando con éxito un nuevo objeto a la matriz selectHeader con un
{value: firstName, index: 1}El problema es que cuando un usuario selecciona un nuevo valor para un encabezado en el índice 1 (o cualquier índice), quiero verificar si hay un duplicado en esta matriz.
No estoy seguro de cómo hacer esto en línea con setState y parece que no puedo encontrar un buen hilo en este ejemplo
Aquí está el CustomInput con el tipo seleccionado a continuación
<thead> <tr> { fileContacts.map((contact) => ( <th scope="col" key={fileContacts.indexOf(contact)}> <WizardInput // this is just a fancy CustomInput at its core type="select" defaultValue={"Do not Import"} tag={CustomInput} name="selectHeader" id="selectHeader" onChange={({ target }) => { setUpload({...upload, selectHeader: [...upload.selectHeader, {value: target.value, index:fileContacts.indexOf(contact)}]}) // this is adding a duplicate object if the user changes the header value twice. }} innerRef={register} errors={errors} options={['First Name', 'Last name', 'Phone', 'Email']} /> </th> ))} </tr> </thead>Cree una nueva variable para el encabezado de selección y filtre esa matriz en busca de duplicados (si necesita ayuda, consulte esta pregunta ¿Cómo eliminar todos los duplicados de una matriz de objetos? ) y luego pásela a setUpload
Tal vez podría filtrar el anterior antes de agregar el nuevo.
setUpload({...upload, selectHeader: [...upload.selectHeader.filter(({value}) => value != target.value), { value: target.value, index:fileContacts.indexOf(contact) }] })Trate de usar actualizaciones funcionales :
setUpload((upload)=>{ if(upload.selectHeader.some(h => h.value == target.value)) return upload return { ...upload, selectHeader: [ ...upload.selectHeader, { value: target.value, index:fileContacts.indexOf(contact) } ] } })