Reactjs 调用函数，该函数使用钩子，从react navigation自定义标头内部调用

我有一个用钩子写的屏幕。 在屏幕上，我在react导航标题中有一个自定义按钮。按下按钮，我需要调用函数

updateUser

，该函数使用来自状态的值（例如

userName

）

因此，我使用

navigation.setParams

函数将

updateUser

函数传递给标题。 在标题中，我从

navigation.state.params

调用

updateUser

第一次按下时，

用户名

值正确。但是如果我随后将从组件内部更改值

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

const ProfileScreen=（{navigation}）=>{
const[userName，setUserName]=useState（'John'）；
useffect（（）=>{
navigation.setParams({
更新者，
});
}, [])
常量更新程序=（）=>{
log（'userName'，userName）；
}
返回（…）
};
ProfileScreen.navigationOptions=（{navigation}）=>({
头灯：（）=>{
const{params={}}=navigation.state；
返回(
params.updateUser（）}>
更新用户
);
},
});

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

有没有合适的方法来解决这个问题？如果没有，解决方法是什么？

我的解决方法#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在代码上更干净一些，但我个人更喜欢解决方案#1，因为第二个解决方案可能会导致不明显的错误，以防我们无法添加一些变量（用于

updateUser

函数）来使用effect数组

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