Блог

Главная - Вопросы по программированию - Невозможно обновить компонент (`Назад`) при отображении другого компонента

Невозможно обновить компонент (`Назад`) при отображении другого компонента

#react-native #react-hooks

Вопрос:

Я знаю, что на этот вопрос отвечали много раз, но я просмотрел все ответы, и ни один из них не похож на мой случай. У меня есть компонент JSX, который в основном является заголовком, и в нем я поместил другой компонент JSX, который является кнопкой обратного нажатия. В этой кнопке обратного нажатия у меня есть SVG, который завернут в нажимаемую кнопку. Теперь я хочу, чтобы цвет SVG менялся при нажатии. Для этого у меня есть следующий код:

 function Back({style, onPress}) {
  const [pressed, setPressed] = useState(false);
  const [color, setColor] = useState('white');

  // const Change = useCallback(async (colour) => {
  //   setColor(colour);
  // }, [color]);

    useEffect(async () => {
    if (pressed) {
    await  setColor('#c5e2e8');
    } else {
    await  setColor('white');
    }
  }, [color, pressed]);

  return (
    <Pressable
      style={({pressed}) => {
        pressed ? setPressed(true) : setPressed(false);
        [style];
      }}
      onPress={onPress}>
      <Svg
        xmlns="http://www.w3.org/2000/svg"
        version="1.1"
        height={36}
        width={36}
        viewBox="0 0 512 512"
        fill={color}>
        <Path d="somerandompath" />
      </Svg>
    </Pressable>
  );
}

Проблема в том, что, когда я нажимаю кнопку «Назад», я получаю предупреждение » Не удается обновить компонент ( Back ) при отображении другого компонента

Как вы можете видеть, я попытался поместить его в эффект использования. Однако это не помогло решить мою проблему.

Ответ №1:

Хорошо, я пытался решить эту проблему в течение многих часов, и через 5 минут после публикации здесь мне удалось ее решить! Вот вам и ответ:

Используйте события onPressIn и OnPressOut нажимаемого компонента. Я удалил все стили. Вот новый код:

 function Back({style, onPress}) {
  const [color, setColor] = useState('white');

  const onPressIn = async () => {
    await setColor('#c5e2e8');
  }
  
  const onPressOut = async () => {
    await setColor('white');
  }


  return (
    <Pressable
      onPressIn={onPressIn}
      onPressOut={onPressOut}
      onPress={onPress}>
      <Svg
        xmlns="http://www.w3.org/2000/svg"
        version="1.1"
        height={36}
        width={36}
        viewBox="0 0 512 512"
        fill={color}>
        <Path d="somepathcode" />
      </Svg>
    </Pressable>
  );
}
Метки: