Блог

Цвет моего компонента изменяется в зависимости от значения prop ‘level’. Когда я попытался использовать состояния для установки backgroundColor, я понял, что все компоненты имеют один и тот же цвет, поскольку состояние продолжает меняться для каждого комментария. Я пытался использовать ссылки и состояния, чтобы решить эту проблему, однако я не смог решить проблему, поскольку код, похоже, работает одинаково. Любая помощь была бы отличной, спасибо.

 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,
        }
 

Я бы удалил state , useEffect и ref, поскольку они усложняют компонент.

Вместо этого установите цвет фона на основе значения level . Лучший способ аналогичен тому, что вы сделали в useEffect, но вместо этого поместите его в обычную функцию.

Что-то вроде:

 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(),
}
 

Вы можете использовать второй аргумент useEffect , чтобы указать ему, когда запускать (по умолчанию он запускается при каждом обновлении). Я бы предположил, что вы хотите передать level в качестве второго аргумента на основе вашего кода, чтобы useEffect он выполнялся только при level обновлении.

Формат для использования useEffect со вторым аргументом выглядит следующим образом:

          useEffect(() => {
              console.log(state); 
              //value of state is used here therefore must be passed as a dependency
         }, [state])