React Native：ListView无法传递Props，渲染时获取对象失败

看起来你遇到的问题是明明接口返回了6条数据，组件也能按次数渲染静态内容，但就是没法访问Redux返回数据的属性，每次碰this.props.item.id就报错。结合你的描述，我整理了几个最可能的原因和对应的解决办法：

1. 初始状态没设对，首次渲染时item成了undefined #

Redux store里如果没把列表字段的初始值设为空数组，组件刚挂载的时候this.props.items可能是null或者undefined——虽然后续异步请求完成后数据会更新，但首次渲染时就会触发报错。

解决办法：
在你的reducer里把列表初始值改成空数组：

// 示例reducer
const initialState = {
  items: [], // 这里一定要设为空数组，别用null/undefined
  loading: false,
  error: null
};

function itemReducer(state = initialState, action) {
  switch(action.type) {
    case 'FETCH_ITEMS_SUCCESS':
      return { ...state, items: action.payload };
    // 其他action处理逻辑...
    default:
      return state;
  }
}

2. 没做空值判断，异步请求完成前就硬访问属性 #

Axios请求是异步的，组件会先在请求还没完成时渲染一次，这时候this.props.items要么是空数组，要么还没拿到数据，直接碰item.id肯定会炸。

解决办法：
给属性访问加个安全防护，两种方式选一个就行：

方式一：在父组件map的时候加判断 #

render() {
  const { items } = this.props;
  return (
    <ListView>
      {items.map(item => (
        // 先确认item存在再渲染
        item ? <ItemView item={item} key={item.id} /> : null
      ))}
    </ListView>
  );
}

方式二：在ItemView里用可选链操作符 #

// ItemView组件的render方法
render() {
  const { item } = this.props;
  return (
    <div>
      {/* 用?.安全访问属性，不存在就返回undefined不会报错 */}
      <p>ID: {item?.id}</p>
    </div>
  );
}

3. Props的映射或传递路径错了 #

有可能你在mapStateToProps里把数据映射成了别的名称，或者遍历的时候没正确传递数组元素。比如Redux state里数据存在state.productList.items，但你映射成了this.props.products，那遍历的时候自然拿不到正确的item。

检查点：

• 确认mapStateToProps的路径正确：

const mapStateToProps = state => {
  return {
    items: state.yourReducerName.items // 这里要和reducer里的状态结构对应
  };
};

• 确认遍历的是正确的数组，并且把每个元素传给ItemView：

// 正确写法
this.props.items.map(item => <ItemView item={item} key={item.id} />)

4. 接口返回的数据结构和你预期的不一样 #

虽然你console.log看到有6条数据，但说不定每条数据的结构不是对象——比如返回的是字符串或者嵌套了额外层级，导致你访问id的时候找不到对应的属性。

解决办法：
在reducer里接收数据时，打印每条数据的结构确认：

case 'FETCH_ITEMS_SUCCESS':
  console.log('单条数据结构:', action.payload[0]); // 打印第一条看看
  return { ...state, items: action.payload };

如果结构不对，要么调整接口返回格式，要么在前端先把数据转换成你需要的结构。

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