呈现其他组件时无法更新组件("上一步")

Question

我知道这个问题已经被回答了很多次，但我已经看过所有的答案，没有一个看起来像我的情况。我有一个JSX组件，它基本上是一个标头，在其中我放置了另一个JSX组件，它是一个反向按钮。在那个背压按钮中，我有一个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>
);
}