React Native - 子组件中的相同函数调用但结果不同答案

【问题标题】：React Native - Same Function call in child component but different resultReact Native - 子组件中的相同函数调用但结果不同
【发布时间】：2022-01-10 09:58:55
【问题描述】：

也许这个问题以前有人问过，但很遗憾我找不到答案。

我有一个名为 AccountManagement 的屏幕，我可以在其中更改用户数据，最后还有一个更新数据的按钮。

const AccountManagement = (props) => {
    const {userData} = useContext(AuthContext)
    const [name, setName] = useState(userData.name)
    //other data...
    const update = () => {
        userData.name = name
        // set other data
        updateProfile(userData)
        navigation.navigate('Profile')
    }
}

到目前为止，一切正常。但是，如果我通过 props 在其他组件中调用相同的函数 (update())，例如 name 的更改状态将被忽略。下面，有同屏AccountManagement的返回调用

 return(
    <SafeAreaView style={styles.container}>
        <HeaderBar updateInfo={update}/>
        <TextInput 
            style={styles.input}
            value={name}
            onChangeText={setName}
            placeholder=""/>
    <TouchableOpacity style={styles.changeContainer} 
                      onPress={update}>
        <Text style={styles.change}>Update Info</Text>
    </TouchableOpacity>
)

在组件 HeaderBar 中，我有一个 TouchableOpacity，它应该与 AccountManagement 中的 TouchableOpacity 完全相同，调用 update()，它确实如此，但是当我按下 HeaderBar 中的 TouchableOpacity 时，从未使用过更改的名称组件

const HeaderBar = (props) => {
  return(
    <View>
        <TouchableOpacity onPress={props.updateInfo} style={styles.rightContainer}>
            <Text style={styles.rightText}>Update Info</Text>
        </TouchableOpacity>
    </View>
  }
)

即使我尝试使用 console.log 打印，我也看不到更改。

我现在的问题是：

为什么当我从 HeaderBar 组件按更新时，更改的名称会被忽略？

我该如何解决这个问题？

提前谢谢你

【问题讨论】：

标签： javascript reactjs react-native components use-state

【解决方案1】：

因为您的函数更新没有在 AccountManagement 中调用，也没有在 HeaderBar 中调用

 <HeaderBar updateInfo={() => update()}/>

【讨论】：

这不会改变任何事情。调用该函数，因为导航调用在两种情况下都有效，但不考虑名称的更改状态