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);

愚蠢的“Proposal”组件！

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

Answer 2

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

干杯：）

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

2 个答案: