javascript - react native FlatList 错误 -- "Possible Unhandled Promise Rejection (id: 0): undefined is not an object"

Question

好的，情况是这样的:

我正在使用 Redux 开发 React Native 应用程序，我想使用 FlatList 显示 GET 请求(使用 Axios 发出)的结果。但是，当我尝试使用 FlatList 呈现该数据时，出现错误，并且什么也没有显示!我确信正在返回数据，因为我可以使用普通文本组件显示它，但我需要能够将其全部放入 FlatList。

完全被以下错误弄糊涂了: screenshot of error

我发送调用的操作如下(我使用的是 promise 中间件):

{
  type: 'PROPOSALS_FETCH_PAGE',
  payload: axios.get(base + '/proposals/get_recent?page=1'),
}

我的reducer代码如下:

const defaultState = {
  fetching: false,
  fetched: false,
  proposalList: [],
  error: null,
};

const proposalReducer = (state=defaultState, action) => {
  switch (action.type) {
    case "PROPOSALS_FETCH_PAGE_PENDING":
      state = {...state, fetching: true, fetched: false};
      break;
    case "PROPOSALS_FETCH_PAGE_FULFILLED":
      state = {...state, fetching: false, fetched: true, proposalList: action.payload.data.data.proposals};
      break;
    case "PROPOSALS_FETCH_PAGE_REJECTED":
      state = {...state, fetching: false, fetched: false, error: action.payload.message};
      break;
    default: break;
  }
  return state;
}

export default proposalReducer;

最后，我用来实际显示所有这些的智能组件:

import Proposal from './Proposal'

class ProposalFeed extends Component {
  constructor(props) {
    super(props);
    props.dispatch(fetchProposalPage(1));
  }

  render() {
    const proposals = this.props.proposal.proposalList.map(
      proposal => ({...proposal, key:proposal.id})
    );

    return (
      <View>
        <FlatList
          data={proposals}
          renderItem={({proposal}) => (<Proposal
            name={proposal.name}
            summary={proposal.summary}
          />)}
        />
      </View>
    );
  }
}

export default connect((store) => {
  return {
    proposal: store.proposal,
  }
})(ProposalFeed);

还有愚蠢的“提案”组件!

import styles from './Styles';

class Proposal extends Component {
  render() {
    return (
      <View style={styles.horizontalContainer}>
        <View style={styles.verticalContainer}>
          <Text style={styles.name}>{this.props.name}</Text>
          <Text style={styles.summary}>{this.props.summary}</Text>
          <View style={styles.bottom}></View>
        </View>
      </View>
    )
  }
}

export default Proposal;

任何帮助将不胜感激!一段时间以来，我一直在寻找解决方案，但绝对没有任何效果。我也担心问题可能是我正在使用的中间件 (redux-promise-middleware)，但我不确定。

Answer 1

之前

  <View>
    <FlatList
          data={proposals}
          renderItem={({proposal}) => (<Proposal
            name={proposal.name}
            summary={proposal.summary}
          />)}
        />
   </View>

之后

<View>
   <FlatList
      data={proposals}
      renderItem={({item}) => (<Proposal
      name={item.name}
      summary={item.summary}
      />)}
    />
 </View>

将proposal替换为item。看来FlatList是被迫使用item作为 renderItem 的对象