En mi aplicación, paso algunos datos meteorológicos a un componente como accesorio y quiero que el color de la actualización temporal se base en ese valor. Aquí esta lo que hice. Parece que reaccionar no siempre se vuelve a renderizar cuando se cambia un accesorio. ¿Cómo puedo asegurarme de que esto se actualice cada vez que cambie el accesorio?
const Current = (props) => { const { weather } = props const [color, setColor] = useState([]) useEffect(() => { setColor(tempScheme[weather.current.temp_f]) }, [weather, color]) return ( <Container> <CardContent> <Header> <Typography variant='h6'>Currently</Typography> <Typography variant='h6'> {formatDate(props.weather.location.localtime)} </Typography> </Header> <Weather> <Typography variant='h5'> {props.weather.current.condition.text} </Typography> <Typography variant='h2' style={{"color": `rgb(${color})`}}> {Math.round(props.weather.current.temp_f)}° </Typography> </Weather> <Location> <Typography variant='body1'> {props.weather.location.name}, {props.weather.location.region}</Typography> <Image src={props.weather.current.condition.icon} /> </Location> </CardContent> </Container> )yo aquí
Está mezclando algunos conceptos aquí, lo que está rompiendo la implementación. Por un lado, está pasando el objeto meteorológico (con color) como accesorio, pero también está almacenando/haciendo referencia a esto en el estado local y usando useEffect para establecer esta instancia interna de color. En otras palabras, no está reaccionando a los cambios de color del componente principal. Además, reaccionar no se volverá a procesar si una clave/valor cambia en un objeto en un componente principal, solo si el objeto en sí cambia. lo que quiere hacer es mover su estado de color y useEffect un nivel hacia arriba, y también ajustar la matriz de dependencia de useEffect para que se suscriba al cambio correcto, entonces
const [color, setColor] = useState(tempScheme[weather.current.temp_f]y
useEffect(() => { setColor(tempScheme[weather.current.temp_f]) }, [weather.current.temp_f])luego páselo al niño como accesorio de color
<Current color={color} />Luego, para consumir dentro del componente en sí, simplemente puede hacer
const current = ({ color }) => ...restOfTheComponentalternativamente, probablemente pueda simplificar esto simplemente eliminando el estado local y el efecto de uso, y simplemente pasando el color directamente así
<Current color={weather.current.temp_f} />