En mi aplicación React Native, estoy representando una matriz y tengo botones de alternancia establecidos en esa página. Si cambio cualquier elemento, la matriz se cambia y el componente se vuelve a representar, lo que da como resultado un parpadeo del componente. ¿Cómo puedo simplemente cambiar el elemento que se necesita cambiar y detener el parpadeo?
Aquí está mi componente actual:
const Notifications = () => { const dispatch = useDispatch(); const { t } = useTranslation('setting'); const notificationStatus = useSelector(getNotificationModeSelector); const setNotificationStatus = useCallback( (value: any) => dispatch(notificationsActions.setNotifications(value)), [dispatch], ); const getNotificationStatus = useCallback( () => dispatch(notificationsActions.getNotifications()), [dispatch], ); const onToggleNotification = useCallback(async (item) => { var changeParam = notificationStatus.map(obj => obj.id === item.id ? { ...obj, enabled: obj.enabled ==='1' ? '0' : '1' } : obj ); setNotificationStatus(changeParam); }, [notificationStatus, setNotificationStatus]); useEffect(() => { getNotificationStatus(); }, []); console.log('Notifications Page',notificationStatus ); return ( <DesktopContainer> <Container> {notificationStatus.length !== 0 && notificationStatus.map((item)=>{ return( <Wrapper key={Math. floor(Math. random() * 100)}> <Title>{item.name}</Title> <Switch onColor={styles.SWITCH_COLOR} offColor={styles.MEDIUM_GRAY} isOn={item.enabled === '1' ? true : false} size={ Dimensions.get('screen').width > styles.MIN_TABLET_WIDTH ? 'large' : 'medium' } onToggle={()=>onToggleNotification(item)} /> </Wrapper> ) }) } </Container> </DesktopContainer> ); }; export default memo(Notifications);El problema está en esta línea:
<Wrapper key={Math. floor(Math. random() * 100)}> Su key siempre debe ser un valor fijo. Si su elemento de estado de notificationStatus tiene una identificación única, eso es ideal. React optimiza su ciclo de renderizado usando estas claves; eso es lo que le permite cambiar solo lo que necesita. Dado que todos sus componentes mapeados tienen nuevas claves en cada renderizado, React los vuelve a renderizar todos.
Consulte la sección "Elegir una clave" de este tutorial para obtener más información. https://reactjs.org/tutorial/tutorial.html