Por diseño, cuando el estado se actualiza, la interfaz de usuario debería actualizarse.
Sin embargo. Si devuelvo un objeto nuevo, no actualizará la interfaz de usuario.
case 'clearArticleForm': let newState1 = {}; return newState1; }Si devuelvo un objeto nuevo y lo completo de la siguiente manera, todavía no puedo actualizar la interfaz de usuario.
const initial_state = {link:{}, image:{}, title:{}, summary:{}, tag:{}, domain:{}, valid: false}; case 'clearArticleForm': let newState1 = initial_state; return newState1; }Sin embargo, si lo completo de esta manera, finalmente conseguiré que la interfaz de usuario se actualice.
const initial_state = {link:{value:''}, image:{value:''}, title:{value:''}, summary:{value:''}, tag:{value:''}, domain:{value:''}, valid: false}; case 'clearArticleForm': let newState1 = initial_state; return newState1; }Pensé que, por definición/diseño, cuando el estado cambia, la interfaz de usuario debería actualizarse. Que esta pasando aqui.
El estado cambia como verifiqué en el componente funcional, sin embargo, la interfaz de usuario no lo hace hasta el tercer ejemplo.
He descrito el comportamiento para este caso, sin embargo, estoy buscando una regla y documentación para entender el caso general: inducción.
Componente funcional:
const data = useSelector((state) => state.ArticleForm) || {}; // ... snip <M10 valid = {data.link.valid} value = {data.link.value} onChange={onChange} className = 'modal_article_input' placeholder="link" name="link" />Aunque el estado se está actualizando, ese estado debe usarse en su JSX devuelto
Por ejemplo, si está viendo una parte del árbol de estado en su componente funcional pero no usa esa parte del árbol en su componente, esa interfaz de usuario no se actualizará.
En su fragmento de código central, su estado tiene claves y sus valores son objetos vacíos.
const initial_state = {link:{}, image:{}, title:{}, summary:{}, tag:{}, domain:{}, valid: false};pero en el último estos objetos tienen claves y valores.
const initial_state = {link:{value:''}, image:{value:''}, title:{value:''}, summary:{value:''}, tag:{value:''}, domain:{value:''}, valid: false};¿Puede ser esta la razón por la que no se actualizó el render?