He visto algunas cosas sobre nombres de propiedades computadas para componentes de clase, ¿existe una solución similar para componentes funcionales?
tengo un estado inicial de {}.
const [choice, setChoice] = useState({})cuando se hace clic en un botón, me gustaría agregarle un nuevo k:v dinámicamente.
onClick={()=>{ setChoice( props.choice[Key]=[Val] ); }esto no parece funcionar...
y espero agregar a la variable de elección, así: {"key":"val","key1":"val1",etc..)
También he probado esto:
class Choice { constructor(key, value){ this.key = key, this.value = value } }pero no estoy seguro de cómo ajustar onClick para ello.
Para agregar al estado actual un nuevo par de valores clave:
onClick={() => { setChoice( currentState => { return {...currentState, Key:Val} } }}El controlador en el estado establecido tiene esta sobrecarga que le permite usar el estado anterior y agregarlo.
el problema proviene de su acceso para choice en la función onClick. La buena sintaxis debería ser (porque se puede acceder directamente a la elección como una variable en su componente)
onClick={()=>{ setChoice( { ...choice, key:val } ); } choice es una variable de estado, por lo que se puede acceder directamente por su nombre. No es necesario vincular los accesorios de sus componentes con props.choice
setChoice debe tomar como argumento la variable original, más el nuevo par clave/valor. Por lo tanto, la desestructuración de ... elección y la variable miembro agregada clave: valor.
Editar: si desea que sus actualizaciones sean más sólidas con la forma React, debe usar la sintaxis de devolución de llamada. Finalmente tendrías
setChoice(choice => { return {...choice, key:val}})Esto evita algunos problemas debido a la naturaleza asíncrona de las actualizaciones de estado en React.