React Native：如何通过Redux访问嵌套数组中的数据？

问题根源 #

1. localObject是数组而非单个对象：你定义的localObject是包含单个对象的数组，直接访问localObject.data会返回undefined——数组本身没有data属性，必须先取数组的第一个元素localObject[0]，再访问其data属性。
2. Redux状态访问逻辑错误：如果你的Redux state中localObject是数组结构，state.localObject.data同样会返回undefined，需要调整为state.localObject[0]?.data（用可选链避免报错）。
3. 异步状态更新的打印问题：useEffect中直接打印data无法获取最新值，因为Redux状态更新是异步的，需单独监听data变化再打印。

修正后的代码 #

组件部分 #

const localObject = [
    {
    data: [
      {
        title: "Alphabet",
        img: "https://cdn-icons-png.flaticon.com/512/4217/4217860.png",
        icon: "star",
      },
      {
        title: "Numbers",
        img: "https://cdn-icons-png.flaticon.com/512/709/709337.png",
        icon: "star",
      },
    ],
  }
]

// 用可选链访问数组第一个元素的data，默认值为空数组避免FlatList报错
const data = useSelector(state => state.localObject[0]?.data || []);
const dispatch = useDispatch()

useEffect(() => {
  // 修正：取数组第一个元素的data传入dispatch
  dispatch(setData(localObject[0].data));
}, []);

// 监听data状态变化，打印最新值
useEffect(() => {
  console.log("data", data);
}, [data]);

return (
  <View style={{ alignItems: "center" }}>
    <View>
      <FlatList
        data={data}
        ListFooterComponent={() => <Text style={{ marginTop: 50 }}>hh</Text>}
        renderItem={({ item }) => (
          <View>
            <Text>{item.title}</Text>
          </View>
        )}
      />
    </View>
  </View>
);

Redux Slice部分（关键） #

确保你的slice reducer逻辑匹配状态结构：

import { createSlice } from '@reduxjs/toolkit';

// 初始状态：localObject是数组，初始为空数组
const initialState = {
  localObject: []
};

const localObjectSlice = createSlice({
  name: 'localObject',
  initialState,
  reducers: {
    setData: (state, action) => {
      // 将传入的data存入数组第一个元素的data属性
      state.localObject[0] = { data: action.payload };
    }
  }
});

export const { setData } = localObjectSlice.actions;
export default localObjectSlice.reducer;

可选优化 #

如果不需要localObject是数组结构，建议直接将其定义为单个对象，这样访问逻辑更简单：

// 调整localObject为单个对象
const localObject = {
  data: [
    { /* ... */ },
    { /* ... */ }
  ]
}

// useSelector直接访问
const data = useSelector(state => state.localObject.data || []);

// dispatch直接传localObject.data
dispatch(setData(localObject.data));

内容的提问来源于stack exchange，提问作者El houcine Oulmostaf