ネイティブFlatListエラーリアクト - 「可能な未処理の約束拒絶は、（ID：0）：未定義のオブジェクトではありません」

Question

さて、ここでの状況です：

私が反応ネイティブReduxのを使用して、アプリ、およびIに取り組んでいますFlatListを使用してGETリクエスト（Axiosを使用して作成）の結果を表示したい。しかし、FlatListを使用してそのデータをレンダリングしようとすると、エラーが発生し、何も表示されません！私は通常のテキストコンポーネントを使用してデータを表示できるので、データが返されていると確信していますが、すべてをFlatListに入れる必要があります。

次のエラーによって完全flummoxed：次のように私は電話をかけるために派遣していますアクションがある screenshot of error

（私は約束のミドルウェアを使用しています）：

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

マイ減速コードがあります次のように：最後に

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）かもしれないと心配していますが、わかりません。以下、API呼び出しで再来実装する

Answer 1

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

前に...私はAPIの呼び出しを実装するために従う方法です

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

、... FlatListがrenderItemのオブジェクト

Answer 2

ない良い方法は、後

//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()); 
    } 

乾杯:)