React Native onChangeText多函数调用仅部分生效问题排查

这不是React Native 0.62的版本缺陷，是React状态更新的异步批处理+闭包快照机制导致的写法问题，TextInput场景和Context场景的异常本质完全一致：

• React的state更新默认会在同一执行上下文内做批处理，连续调用setState时，所有直接传入状态对象的set调用，拿到的都是当前渲染周期的旧状态快照，后执行的setState会直接覆盖前面的更新合并结果，不存在“只有第一个/最后一个函数生效”的情况，本质是后写入的状态把前一次写入的字段冲掉了。
• 你当前代码中，onChangeText里第一次调用setData({ ...data, input_email: text })后，状态不会立刻更新，紧接着执行checkEmailSyntax时，函数内闭包引用的data还是回调触发前的旧快照——也就是还没写入新输入邮箱值的旧状态，所以checkEmailSyntax里调用的第二次setData，会把input_email的值回滚成旧值，最终呈现的效果就是看起来第一次setData设置邮箱的操作没生效。
• Context场景下连续调用logout、setUser仅最后一个生效，也是完全相同的原因：两个方法如果操作的是同一个Context状态，后执行的方法拿到旧状态快照做更新，就会覆盖前一个方法写入的字段。

你不需要强制使用useEffect监听email变化触发校验，直接修改wrongEmailSyntax状态完全可行，只要规避闭包旧快照的问题即可，三种实现方案可按需选择：

方案1：单次setData合并所有更新（推荐，无额外渲染开销） #

不要拆成两次setData调用，拿到输入文本时同步完成校验，一次性把所有字段更新到state中，从根源避免状态覆盖问题：

// 把校验逻辑抽成纯函数，只返回校验结果，不直接操作state
const checkEmailSyntax = (inputVal) => {
  return inputVal.includes('@') && inputVal.includes('.');
};

// TextInput的onChangeText回调
onChangeText={text => {
  setData({
    ...data,
    input_email: text,
    wrongEmailSyntax: !checkEmailSyntax(text)
  });
}}

该写法无多余的effect触发，状态一次更新完成，逻辑简单直观，适合当前单字段校验的场景。

方案2：函数式更新规避闭包旧值问题 #

如果确实需要拆分多次setData调用，给setData传入更新函数而非直接传状态对象即可，函数式更新始终能拿到上一次更新后的最新状态，不会受闭包旧快照影响：

const checkEmailSyntax = (inputVal) => {
  const isValid = inputVal.includes('@') && inputVal.includes('.');
  // 函数式更新的参数prevData是截止当前最新的状态，不会拿到旧快照
  setData(prevData => ({
    ...prevData,
    wrongEmailSyntax: !isValid
  }));
};

// 第一次setData也建议改成函数式写法，规避其他场景下可能出现的闭包问题
onChangeText={text => {
  setData(prevData => ({...prevData, input_email: text}));
  checkEmailSyntax(text);
}}

方案3：useEffect监听字段变化触发校验 #

如果校验逻辑依赖多个异步更新的状态，可以用useEffect监听对应字段变化再触发校验，适合逻辑复杂、多状态联动的校验场景：

// 监听input_email变化，值更新后自动触发校验
useEffect(() => {
  const isValid = data.input_email.includes('@') && data.input_email.includes('.');
  // 校验结果和当前状态一致时不调用setData，避免多余渲染和死循环
  if (data.wrongEmailSyntax !== !isValid) {
    setData(prev => ({...prev, wrongEmailSyntax: !isValid}));
  }
}, [data.input_email]);

// onChangeText里只需要负责更新输入值即可
onChangeText={text => {
  setData(prev => ({...prev, input_email: text}));
}}

注意：禁止在useEffect中无条件调用setState，必须加状态一致性判断，否则会触发渲染死循环。

useEffect中连续调用Context返回的logout、setUser出现的覆盖问题，修复逻辑和上述state问题一致：如果两个方法操作的是同一个Context状态，要么把两个方法的逻辑合并为一次Context状态更新，要么在Context内部的更新逻辑中统一使用函数式更新写法，确保每次更新都基于最新状态，不会被同批次的其他更新覆盖。

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