javascript - 尝试访问表单处理程序中的状态会在本机反应中给出默认状态而不是更新状态

Question

我有一个具有两个状态的组件，name其email初始值来自先前的路由，使用 setter 方法时状态确实会发生变化，但是，当我尝试从处理程序访问状态值时，它总是给出默认值 这是代码

const EditProfileScreen = (props) => {
const [name, setName] = useState(props.navigation.getParam('name'))
const [email, setEmail] = useState(props.navigation.getParam('email'))
const nameHandler = (text) => {
    setName(text)
}
const emailHandler = text => {
    setEmail(text)
}
const handleSubmit =() => {
        console.log(name)
 // It returns the default value not the updated one

 }
 return (
<View>
                <TextInput style={styles.input} onChangeText={emailHandler} value={email} />
                <TextInput style={styles.input} onChangeText={nameHandler} value={name} />
</View>
)}

任何帮助将不胜感激

标签： javascriptreactjsreact-nativereact-hooks

Answer 1

我不确定为什么会发生这种情况，但作为一种解决方法，您可以引入useEffect钩子：

const [name, setName] = useState('')
const [email, setEmail] = useState('')

useEffect(() => {
  setName(props.navigation.getParam('name'))
  setEmail(props.navigation.getParam('email'))
}, []);