数据未从API获取

时间:2019-08-20 14:59:36

标签: react-native redux

我试图在本地主机上使用带有Redux的React Native从API提取数据,但未获取,并且显示此错误: “ TypeError:无法将未定义或null转换为对象”

这是我的代码:

App.js

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';
import reducers from './reducers';
import Router from './Router';

class App extends Component {
    render() {
        const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
        return (
            <Provider store={store}>
                <Router />
            </Provider>
        );
    }
}

export default App;

reducers / RestaurantList.js

import { RESTAURANT_SHOW } from '../actions/types';

const INITIAL_STATE = {
    restaurant: ''
};
export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case RESTAURANT_SHOW:
            return {
                 ...state,
                  restaurant: action.payload.data 
                };
        default:
            return state;
    }
};

actions / RestaurantShow.js

import { RESTAURANT_SHOW } from './types';
import axios from 'axios';

export const restaurantShow = () => {
    return (dispatch) => {
      dispatch({ 
        type: RESTAURANT_SHOW, 
        payload: { data: response.data } 
      })
       return axios.post('http://MY IP ADDRESS/react/restaurant.php')
       //.then((response) => {
       // Actions.main({ resdata: response.data });
     // })

         .then((response)=> {
            (dispatch(getRestaurant(response.data))) 
          })
          .catch((error) => {
            console.log(error);
          });  
    }
}

export function getRestaurant(data) {

  return {
      type: RESTAURANT_SHOW,
      data
  }
}

component / Restaurant.js

import React, {Component} from 'react';
import { View,StyleSheet, Image, ListView, Text, ScrollView} from 'react-native';
import {connect} from "react-redux";
import {SearchBox, CardSection} from './common'
import * as actionCreators from "../actions/index.js";

class Restaurant extends Component{
  componentWillMount() {
    this.createDataSource(this.props);
}
componentWillReceiveProps(nextProps) {
    this.createDataSource(nextProps);
    console.log(this.props.id);
}
createDataSource({ resdata }) {
    const ds = new ListView.DataSource({
        rowHasChanged: (r1, r2) => r1 !== r2
    });
    this.dataSource = ds.cloneWithRows(resdata);
}


    render(){
      console.log(this.props);
        return(

      <ScrollView>  
        <SearchBox />
        <View style={styles.MainContainer}>
           <ListView
            dataSource={this.dataSource}
             renderRow={(rowData) =>
       <View style={{flex:1, flexDirection: 'column'}} >
       <CardSection>    
          <Text style={styles.text}>{rowData.name}</Text></CardSection>

                   </View>     }
             />
                       </View>
                       </ScrollView>


        );
    }
}

const mapStateToProps = state => {
  return state
};

export default connect (mapStateToProps, actionCreators)(Restaurant);

这是模拟器中错误的屏幕截图

enter image description here

0 个答案:

没有答案