Question

我知道这个问题已经被回答过很多次了，但是我已经浏览了所有的答案，没有一个看起来像我的情况。我有一个 JSX 组件，它基本上是一个标题，我在其中放置了另一个 JSX 组件，它是一个后按按钮。在那个 backpress 按钮中，我有一个 SVG，它被包裹在一个 Pressable 里面。现在我希望 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)

如您所见，我尝试将其放入 useEffect 中。但是，它并没有帮助解决我的问题。

Answer 1

好的，我已经尝试解决这个问题好几个小时了，在这里发帖 5 分钟后，我设法解决了它！答案如下：

利用 Pressable 组件的 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>
  );
}

渲染不同的组件时无法更新组件（`Back`）

1 个答案: