如何在React Native AsyncStorage中存储嵌套对象？

1. 调整父组件初始状态为嵌套对象 #

将原来分散的数组结构改成包含所有核心属性的顶层对象，从根源上构建嵌套结构：

// parent component
const [workoutData, setWorkoutData] = useState({
  today: today, // 确保today是你已处理好的日期字符串（如"2022-09-04"）
  index: props.index,
  setDetails: [] // 用数组存储训练组，若需以索引为键可改为{}
});

2. 修正子组件的数据传递逻辑 #

去掉错误的函数拼接写法，直接传递单个训练组的完整数据：

// Child component
onPress={() => {
  childToParent({
    setIndex: setIndex,
    result: result,
    weight: weight,
    reps: reps,
  });
  buttonStatus(); // 单独调用状态更新函数
}}

3. 父组件更新嵌套对象的训练组数据 #

根据需求选择两种更新方式：

方式一：训练组以数组形式存储（保留顺序） #

// parent component
useEffect(() => {
  if (data) {
    setWorkoutData(prevState => ({
      ...prevState, // 保留原有日期、索引属性
      setDetails: [...prevState.setDetails, data] // 将新训练组追加到数组
    }));
  }
}, [data]);

方式二：训练组以对象形式存储（以setIndex为键） #

如果需要通过训练组索引快速查找数据，可改用对象结构：

useEffect(() => {
  if (data) {
    setWorkoutData(prevState => ({
      ...prevState,
      setDetails: {
        ...prevState.setDetails,
        [data.setIndex]: data // 用setIndex作为键存储训练组
      }
    }));
  }
}, [data]);

4. 存储嵌套对象到AsyncStorage #

直接序列化完整的嵌套对象进行存储：

const storeData = async () => {
  try {
    await AsyncStorage.setItem(
      `${props.index}`,
      JSON.stringify(workoutData)
    );
    console.log('数据存储成功');
  } catch (e) {
    console.error('存储失败:', e);
  }
};

最终读取后的结构示例 #

数组形式的setDetails： #

{
  "today": "2022-09-04",
  "index": "1512",
  "setDetails": [
    {
      "reps": "3",
      "result": 13.200000000000001,
      "setIndex": 0,
      "weight": "12"
    },
    {
      "reps": "3",
      "result": 26.400000000000002,
      "setIndex": 1,
      "weight": "24"
    }
  ]
}

对象形式的setDetails： #

{
  "today": "2022-09-04",
  "index": "1512",
  "setDetails": {
    "0": {
      "reps": "3",
      "result": 13.200000000000001,
      "setIndex": 0,
      "weight": "12"
    },
    "1": {
      "reps": "3",
      "result": 26.400000000000002,
      "setIndex": 1,
      "weight": "24"
    }
  }
}

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