调用函数，它使用钩子，从内部反应导航自定义标头

Question

我有一个用 React Hooks 编写的屏幕。 在屏幕上，我在反应导航标题中有一个自定义按钮。通过按下按钮，我需要调用函数updateUser，该函数使用状态中的值(例如userName(。

所以我updateUser函数传递给带有navigation.setParams函数的标头。 在标题中，我从navigation.state.params调用updateUser。

第一次按压时 -userName值正确。但是，如果我随后将从组件内部更改值userName- 当我按下按钮时，函数内部的值保持不变。

下面是代码示例：

const ProfileScreen = ({navigation}) => {
const [userName, setUserName] = useState('John');
useEffect(() => {
navigation.setParams({
updateUser,
});
}, [])
const updateUser = () => {
console.log('userName', userName);
}
return (...)
};
ProfileScreen.navigationOptions = ({navigation}) => ({
headerRight: () => {
const {params = {}} = navigation.state;
return (
<TouchableOpacity onPress={() => params.updateUser()}>
<Text>Update user</Text>
</TouchableOpacity>
);
},
});

我假设发生这种情况是因为标头在组件范围之外并且没有获得更新的状态值。此外，React 还有一条规则，规定不要在 React 函数之外调用钩子。

有没有合适的方法来解决它？如果没有，解决方法是什么？

Answer 1

我的解决方法#1是再使用一个useState来跟踪是否按下了更新按钮。

因此，在标题中，当按下按钮时，我们将isUpdateButtonPressed设置为 true。然后在组件中，我们监视该更改，如果更改 - 我们调用updateUser.这样，updateUser函数内部的状态是正确的。

const ProfileScreen = ({navigation}) => {
const [userName, setUserName] = useState('John');
const [isUpdateButtonPressed, setIsUpdateButtonPressed] = useState(false);
useEffect(() => {
navigation.setParams({
setIsUpdateButtonPressed,
});
}, [])
useEffect(() => {
if (isUpdateButtonPressed) {
updateUser();
setIsUpdateButtonPressed(false);
}
}, [isUpdateButtonPressed]);
const updateUser = () => {
console.log('userName', userName);
}
};
ProfileScreen.navigationOptions = ({navigation}) => ({
headerRight: () => {
const {params = {}} = navigation.state;
return (
<TouchableOpacity onPress={() => params.setIsUpdateButtonPressed(true)}>
<Text>Update user</Text>
</TouchableOpacity>
);
},
});

我的解决方法 #2是使用useEffect来监视函数中使用的所有变量updateUser并在每次这些变量更改时使用更新的updateUser函数调用navigation.setParams：

useEffect(() => {
navigation.setParams({
updateUser,
});
}, [userName])

虽然解决方案 #2 在代码中更干净一些，但我个人更喜欢解决方案 #1，因为第二个可能会导致不明显的错误，以防我们错过添加一些变量，该变量用于updateUser函数，使用 Effect 数组。