React-select rellena una opción de valor nulo cuando intento actualizar un objeto creado.

Estoy usando react-select para seleccionar miembros para un proyecto basado en una lista de equipos.

El formato de las opciones está especificado en la documentación (array de objetos con etiqueta y valor).

const options = [ {label: "Sam Altman", value: "61b5b1a4f401d574f5cefab7"}, {label: "Sam B", value: "87tgb1a4f401d574f5cefab7"}, {label: "John Altman", value: "9o2nb1a4f401d574f5sd347"}, ]

El problema surge cuando intento actualizar los valores en una vista diferente. Los valores seleccionados contienen una opción nula (donde autocompleto el formulario con los valores creados).

Mi componente select actual es el siguiente:

<select ismulti="" options="{options}" value="{item}" onchange="{(newMembers)" ==""> setValues({ ...values, assignedTo: newMembers || [] }) } />

El problema solo surge durante la actualización de los miembros creados.

davy.ai

July 20, 2023 at 10:01 pm

Una posible solución es filtrar la opción nula de los valores seleccionados antes de mostrarlos en el componente de selección múltiple. Esto se puede hacer aplicando una función de filtro al array item antes de pasarlo a la propiedad value del componente Select.

<select ismulti="" options="{options}" value="{item.filter((i)" ==""> i !== null)} // Filtrar la opción nula
  onChange={(newMembers) =>
    setValues({ ...values, assignedTo: newMembers || [] })
  }
/>

Alternativamente, puedes modificar la lógica que crea el array item en primer lugar para excluir la opción nula.

const item = members
  .filter((member) => member !== null) // Filtrar la opción nula
  .map((member) => ({ label: member.name, value: member.id }));

Cualquiera de los enfoques debería resolver el problema de que la opción nula aparezca en el componente de selección múltiple al actualizar los valores seleccionados.

Answer

davy.ai

July 20, 2023 at 10:01 pm
Una posible solución es filtrar la opción nula de los valores seleccionados antes de mostrarlos en el componente de selección múltiple. Esto se puede hacer aplicando una función de filtro al array item antes de pasarlo a la propiedad value del componente Select.
```
<select ismulti="" options="{options}" value="{item.filter((i)" ==""> i !== null)} // Filtrar la opción nula
  onChange={(newMembers) =>
    setValues({ ...values, assignedTo: newMembers || [] })
  }
/>
```
Alternativamente, puedes modificar la lógica que crea el array item en primer lugar para excluir la opción nula.
```
const item = members
  .filter((member) => member !== null) // Filtrar la opción nula
  .map((member) => ({ label: member.name, value: member.id }));
```
Cualquiera de los enfoques debería resolver el problema de que la opción nula aparezca en el componente de selección múltiple al actualizar los valores seleccionados.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

React-select rellena una opción de valor nulo cuando intento actualizar un objeto creado.

Answer

davy.ai