Expo调用箭头函数时仅最后一个状态变更生效问题求助

问题根源 #

你遇到的问题是因为React状态更新是异步且批量处理的，同时如果状态更新依赖闭包中的旧状态值，多次独立更新会互相覆盖，最终只有最后一次更新生效。另外你用的sleep函数没加await，根本起不到延迟作用。

修复方案 #

1. 改用函数式状态更新（如果保留独立更新函数） #

如果要继续使用changeLabel、changeDescription这类独立函数，必须确保每个更新都基于最新的前一次状态，而不是闭包中的旧值。把每个状态更新函数改成函数式更新：

// 修改changeLabel函数
const changeLabel = (newLabel, taskID) => {
  setTasks(prevTasks => prevTasks.map(task => {
    if (task.id === taskID) {
      return {...task, label: newLabel};
    }
    return task;
  }));
};

// 同理修改changeDescription和changePriority
const changeDescription = (newDesc, taskID) => {
  setTasks(prevTasks => prevTasks.map(task => {
    if (task.id === taskID) {
      return {...task, description: newDesc};
    }
    return task;
  }));
};

const changePriority = (newPriority, taskID) => {
  setTasks(prevTasks => prevTasks.map(task => {
    if (task.id === taskID) {
      return {...task, priority: newPriority};
    }
    return task;
  }));
};

这种方式下，每次更新都会基于上一次的最新状态，不会被后续更新覆盖。

2. 合并状态更新（更推荐） #

直接把三个变更合并成一次状态更新，既避免异步批量更新的问题，也提升性能：

修改handleSave函数：

const handleSave = (task, description, priorityState, taskID) => {
  // 一次更新完成所有字段修改
  setTasks(prevTasks => prevTasks.map(item => {
    if (item.id === taskID) {
      return {
        ...item,
        label: task,
        description: description,
        priority: priorityState
      };
    }
    return item;
  }));
  navigation.goBack();
};

这样就不需要再调用三个独立的更新函数，一次操作完成所有修改，彻底解决覆盖问题。

3. 移除无效的sleep代码 #

你之前写的sleep函数没有用await，代码会同步执行，根本不会等待延迟，所以这个sleep完全无效，直接删掉即可。

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