React Native状态管理：useState单次操作不更新状态 多次操作才生效

问题根因 #

1. 状态修改违反React不可变原则：saveLifestyles方法中直接对allData状态做引用赋值let arr = allData，后续splice、push操作直接修改原状态数组，导致React状态比对异常，出现单次点击不更新的问题。
2. 初始值同步逻辑错误：useEffect空依赖配置导致父组件异步传入的props.selectedLifeStyle无法同步到本地allData状态；且在未操作的场景下，本地状态没有正确同步后端返回的已选标签，导致返回时提交空数组。
3. 状态更新时序错误：saveLifestyles中在changeAllData异步更新前就调用props.loginChange传入旧的allData，导致上层状态和本地状态不一致。

修复方案 #

1. 修正状态不可变写法

修改saveLifestyles中的数组赋值逻辑，先复制状态再修改，统一用最新的数组值更新本地状态和上层数据：

const saveLifestyles = (item) => {
  let counter = 0;
  // 先浅拷贝原状态，不直接修改原数组
  let arr = [...allData];
  if (arr.length > 9) {
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].id === item.id) {
        arr.splice(i, 1);
        counter = 1;
        break;
      }
      if (arr.length == i + 1) {
        showMessage({
          message: "最多只能选择10个生活方式标签",
          type: "warning",
        });
      }
    }
  } else {
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].id === item.id) {
        arr.splice(i, 1);
        counter = 1;
      }
    }
    if (counter === 0) {
      arr.push(item);
    }
  }
  // 统一用最新的arr更新状态和上层数据
  changeAllData(arr);
  props.loginChange({ selectedLifeStyle: arr });
};

2. 修正初始状态同步逻辑

拆分useEffect，单独监听父组件传入的已选标签变化，保证本地状态和父组件/后端状态同步，避免未操作返回时提交空数组：

// 同步父组件传入的已选标签
useEffect(() => {
  if (props.selectedLifeStyle) {
    changeAllData([...props.selectedLifeStyle]);
  }
}, [props.selectedLifeStyle]);

// 单独处理标签列表接口请求
useEffect(() => {
  if (props.user === null) return;
  changeFetchingStatus(true);
  let params = {
    limit,
    offset,
  };
  getData(
    getLifeStyleTags,
    params,
    (res) => {
      console.log(res, "生活方式标签接口返回");
      changeFetchingStatus(false);
      changeChoice(res.lifestyle_tags);
      newSearchArr(res.lifestyle_tags);
    },
    (err) => {
      changeFetchingStatus(false);
      console.log(JSON.stringify(err, null, 2));
    },
    props.user ? props.user.api_key : masterKey
  );
}, []);

3. 绑定硬件返回按钮触发doneClick

如果是React Native环境，监听硬件返回事件即可实现按压硬件按钮执行和doneClick相同的逻辑：

import { BackHandler } from 'react-native';

useEffect(() => {
  const handleBackPress = () => {
    doneClick();
    // 返回true拦截默认返回行为，由doneClick控制是否返回
    return true;
  };
  const backListener = BackHandler.addEventListener('hardwareBackPress', handleBackPress);
  return () => backListener.remove();
// 把allData加入依赖，保证取到最新状态
}, [allData]);

4. 修正doneClick逻辑顺序

先提交数据再返回，避免返回后上层状态还未更新：

const doneClick = () => {
  if (allData.length === 0) {
    showMessage({
      message: "至少选择一个生活方式标签",
      type: "warning",
    });
  } else if (allData.length > 10) {
    showMessage({
      message: "最多只能选择10个生活方式标签",
      type: "warning",
    });
  } else {
    props.loginChange({ selectedLifeStyle: allData });
    props.navigation.goBack(null);
  }
};

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