我试图在本地主机上使用带有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);
这是模拟器中错误的屏幕截图