页面返回时TextInput新值未生效？硬件返回键触发Redux存值异常

你碰到了闭包陷阱：useEffect的依赖数组是空的，组件挂载时只会生成一次清理函数（也就是return的那个函数），这个函数里捕获的text是初始状态的"initial"。哪怕后续输入框修改了text的值，已经生成的清理函数里的text不会同步更新，所以返回页面时打印/发送的始终是初始值。

两种常用修复方式，选其一即可：

方法一：给useEffect添加正确依赖 #

把text加入useEffect的依赖数组，每次text更新时，useEffect会重新生成清理函数，确保捕获最新的text值：

import { TextInput } from 'react-native'
import React, { useEffect, useState } from 'react'

export default function ChangeModel({ navigation }) {
    const [text, setText] = useState("initial")
  
    const onPressSave = () => {
        console.log(text)
        // 替换成Redux发送逻辑，比如：
        // dispatch(updateInputTextAction(text))
    }

    useEffect(() => {
        return () => onPressSave()
    }, [text]) // 添加text作为依赖


    return (
        <TextInput
            value={text}
            onChangeText={setText}
            style={{ backgroundColor: "grey" }}
        />
    )
}

方法二：用useCallback包裹保存函数 #

如果onPressSave需要复用或逻辑复杂，用useCallback包裹它，确保函数能捕获最新的text，再把函数加入useEffect依赖：

import { TextInput } from 'react-native'
import React, { useEffect, useState, useCallback } from 'react'

export default function ChangeModel({ navigation }) {
    const [text, setText] = useState("initial")
  
    const onPressSave = useCallback(() => {
        console.log(text)
        // Redux发送逻辑：
        // dispatch(updateInputTextAction(text))
    }, [text]) // 依赖text，text更新时函数重新生成

    useEffect(() => {
        return () => onPressSave()
    }, [onPressSave]) // 依赖包裹后的函数


    return (
        <TextInput
            value={text}
            onChangeText={setText}
            style={{ backgroundColor: "grey" }}
        />
    )
}

后续把console.log(text)替换成Redux的dispatch逻辑即可，只要确保text是最新值，就能正确发送最后输入的内容。

内容的提问来源于stack exchange，提问作者Nemesis