Tengo varios svgs de casillas de verificación que estoy mapeando y que eliminan el ícono de marca interno cuando configuro manualmente cualquiera de los estados isSelected en falso. Quiero eliminar/agregar el ícono de marca svg cuando presiono la casilla de verificación en mi aplicación. No estoy seguro de dónde me estoy equivocando actualmente en mi lógica. Funciona correctamente cuando cambio manualmente el estado isSelected a falso, pero no cuando presiono la casilla de verificación.
Estado:
const [option, setOption] = useState([ { permission: 'Can manage users', isSelected: true }, { permission: 'Can place orders', isSelected: true }, ]);Componente:
{option.map(({ permission, isSelected }, i) => ( <CheckboxIcon viewed={isSelected} onPress={() => setOption(prev => { prev[i] = { ...prev[i], isSelected: !isSelected }; return prev; }) } />Casilla de verificación svg:
const CheckboxIcon = ({ width = 26, height = 26, viewed, fill = Colors.success, tickAccountSize, onPress, }) => ( <Svg xmlns="http://www.w3.org/2000/svg" overflow="visible" preserveAspectRatio="none" width={width} height={height}> <Path d="M1 1h24v24H1V1z" vectorEffect="non-scaling-stroke" fill="transparent" /> <IconContainer onPress={onPress} width={width} height={height}> {viewed && <TickIcon tickAccountSize fill={fill} />} </IconContainer> </Svg> );Tienes que actualizar el objeto completo. Su enfoque es modificar el objeto.
AFAIK React useState no rastrea objetos anidados (también matrices). Esto se activará al reemplazar el estado.
En tu caso por ejemplo:
{option.map(({ permission, isSelected }, i) => ( <CheckboxIcon viewed={isSelected} onPress={() => setOption(prev => prev.splice(i, 1, { ...prev[i], isSelected: !isSelected }) } />Con empalme insertamos en el índice i, eliminamos 1 elemento (el antiguo) e insertamos el nuevo objeto. Luego se devuelve una nueva matriz.
En este caso, con splice mantendríamos la posición y actualizaríamos el elemento especificado.
También aquí alguien escribe una buena explicación https://stackoverflow.com/a/43041334/19600120
En las funciones setOptions, está devolviendo el mismo estado. También mutando el estado que no es bueno. Puedes cambiarlo como se muestra a continuación.
setOption(option => { newOption = [...option]; newOption[i] = !newOption[i].isSelected ; return newOption; })No he probado esto localmente, pero conceptualmente se verá así. Puedes crearlo en codesandbox y luego puedo arreglarlo por ti.
Debería considerar usar Immutability Helpers para obtener el mejor rendimiento https://reactjs.org/docs/update.html
Ejemplo:
import update from 'react-addons-update'; const newData = update(myData, { x: {y: {z: {$set: 7}}}, a: {b: {$push: [9]}} });