React Native FlatList 错误 - “可能的未处理承诺拒绝（id：0）：未定义不是对象”

Question

好的，情况如下：

我正在使用 Redux 开发 React Native 应用程序，我想使用 FlatList 显示 GET 请求（使用 Axios 生成）的结果。但是，当我尝试使用 FlatList 呈现该数据时，我收到一个错误，并且什么都没有显示！我确定正在返回数据，因为我可以使用普通的 Text 组件显示它，但我需要能够将其全部放入 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

用 API 调用实现 redux 的方法不是很好，下面是我遵循的一种实现 API 调用的方法...

//Actions

export function fetchStart() {
 return  {
  type: 'PROPOSALS_FETCH_PAGE_PENDING',
  }
}


export function fetchSuccess(data) {
 return  {
  type: 'PROPOSALS_FETCH_PAGE_FULFILLED', 
  data
  }
}


export function fetchFailure(err) {
 return  {
  type: 'PROPOSALS_FETCH_PAGE_REJECTED',
  err
  }
}

The below function is the main function that you need to digest in order to fetch data in a proper way.

export function fetchPage()
{
  return (dispatch) => {
   dispatch(fetchStart())
   axios.get(base + '/proposals/get_recent?page=1').
   then((response) =>  dispatch(fetchSuccess(response)))
   .catch((err) => { dispatch(fetchFailure(err)) })
  }
} 

//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.data.data.proposals};
      break;
    case "PROPOSALS_FETCH_PAGE_REJECTED":
      state = {...state, fetching: false, fetched: false, error: action.err.message};
      break;
    default: break;
  }
  return state;
}

//component
constructor(props) {
    super(props);
    //the main function is called here
    props.dispatch(fetchPage());
  }

干杯:)

Answer 2

之前

  <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的对象