El color de mi componente cambia según el valor del 'nivel' de la propiedad. Cuando intenté usar estados para establecer el color de fondo, me di cuenta de que todos los componentes tienen el mismo color, ya que el estado sigue cambiando para cada comentario. Intenté usar referencias y estados para resolver esto, sin embargo, no he podido resolver el problema ya que el código parece funcionar igual. Cualquier ayuda sería genial, gracias.
function CommentMargin({level}) { const [marginColorState, setMarginColorState] = useState(colors.lightPurple); const marginColor = useRef(null); useEffect(() => { switch (level) { case 1: setMarginColorState(colors.lightPurple); marginColor(marginColorState); case 2: setMarginColorState(colors.crimson); marginColor(marginColorState); case 3: setMarginColorState(colors.orange); marginColor(marginColorState); case 4: setMarginColorState(colors.yellow); marginColor(marginColorState); } } ) return ( <View style={styles(marginColor).container}> </View> );}
export default CommentMargin; const styles = (marginColor) => StyleSheet.create({ container:{ backgroundColor: marginColor.current, }Puede usar el segundo argumento de useEffect para decirle cuándo ejecutar ( de manera predeterminada, se ejecuta en cada actualización ). Supongo que desea pasar el level como su segundo argumento según su código, de modo que useEffect se ejecute solo cuando se actualice el level .
El formato para usar useEffect con un segundo argumento es así:
useEffect(() => { console.log(state); //value of state is used here therefore must be passed as a dependency }, [state])Quitaría el estado, useEffect y ref, ya que están complicando demasiado el componente.
En su lugar, establezca el color de fondo según el valor del nivel. La mejor manera es similar a lo que hizo en useEffect, pero póngalo en una función normal.
Algo como:
const getBackgroundColor = () =>{ switch (level) { case 1: return colors.lightPurple case 2: return colors.crimson case 3: return colors.orange case 4: return colors.yellow } } const styles = () => StyleSheet.create({ container:{ backgroundColor: getBackgroundColor(), }