Editar: ¡Encontré la solución a esto! Vea mi respuesta a continuación.
Básicamente, tengo una parte del estado que se actualiza pero no activa el efecto de uso que lo tiene como dependencia:
const [editableParticipants, setEditableParticipants] = useState(*initial value*); const [joinLeftTimeState, setJoinLeftTimeState] = useState(*initial value*); function addParticipant(newParticipant) { setEditableParticipants([ ...editableParticipants, newParticipant ]) } useEffect(() => { setJoinLeftTimeState( editableParticipants.map(*mapping stuff*) ); }, [editableParticipants]);Cuando se activa addParticipant, editableParticipants se actualiza correctamente pero el efecto no se ejecuta, lo que deja a joinLeftTimeState sin una entrada para el nuevo participante. Puse un registro de consola en el efecto en sí, no se activa en absoluto después de que se ejecuta addParticipant. ¿Que demonios?
Entonces, el problema aquí fue un poco complicado, pero haré todo lo posible para resumirlo.
Esencialmente, el renderizado intentaba hacer un .find en joinLeftTimeState para un participante que se había agregado antes de que se activara el efecto (editableParticipants se actualizó pero joinLeftTimeState aún no), lo que provocó que todo fallara. Agregar valores predeterminados si el .find aparecía vacío permitió que el código progresara y ahora el efecto se activa correctamente.
function Table() { const [editableParticipants, setEditableParticipants] = useState(*initial value*); const [joinLeftTimeState, setJoinLeftTimeState] = useState(*initial value*); function addParticipant(newParticipant) { setEditableParticipants([ ...editableParticipants, newParticipant ]) } useEffect(() => { setJoinLeftTimeState( editableParticipants.map(*mapping stuff*) ); }, [editableParticipants]); return editableParticipants.map( ptcpnt => <Row joinLeftTimeState={joinLeftTimeState} participant={ptcpnt} /> ) } function Row({ joinLeftTimeState, participant }) { const defaultTimes = { a: '', b: '' }; const userTimes = joinLeftTimeState.find( ptcpnt => ptcpnt.id === participant.id ) const { a, b } = userTimes || defaultTimes; return (*stuff*) }Las alegrías de las actualizaciones de estado asincrónicas, ¿verdad? ¡Gracias por todas las ideas!
useEffect(() => { // do something }, [dependency])Supongo que su dependencia no está cambiando porque la función de mapa no cambia la matriz actual, debe asignar el resultado a una nueva var.
considere este fragmento:
var arr = [1,2,3]; arr.map(x=>x*2) (3) [2, 4, 6]mientras que arr sigue siendo:
(3) [1, 2, 3]