React Native:TypeError:this.state.schedule.map 不是对象
2019-09-19
66
嘿,我是 React Native 的新手,目前我正尝试使用来自 API 的数据将数据放入选择器中。我很困惑,它出现了错误,说 TypeError:null 不是对象(评估 this.state.schedules.map)。状态有问题吗,还是我误解了什么概念
这是获取 API
export function getSchedule (token, resultCB) {
var endpoint = "/api/getList"
let header = {
"Content-Type": "application/x-www-form-urlencoded",
"Authorization": "Bearer " + token
};
return dispatch => {
return fetchAPI(endpoint, 'GET', header)
.then((json) => {
dispatch({ type: t.SCHEDULE, schedules: json.datas.description });
resultCB(json.schedules)
})
.catch((error) => {
dispatch({ type: types.EMPTY_SCHEDULE });
resultCB(error)
})
}
}
这是我放置选择器的地方
export const mapStateToProps = state => ({
token: state.authReducer.token,
message: state.authReducer.message,
schedules: state.authReducer.schedules
});
export const mapDispatchToProps = (dispatch) => ({
actionsAuth: bindActionCreators(authAction, dispatch)
});
class Change extends Component {
constructor(){
super();
this.state={
staffId: "",
schedule: '',
type_absen: 1,
schedules: null
}
}
componentDidMount(){
this.props.actionsAuth.getSchedule(this.props.token);
}
render() {
return (
<View style={styles.picker}>
<Picker
selectedValue={this.state.schedule}
style={{backgroundColor:'white'}}
onValueChange={(sch) => this.setState({schedule: sch})}>
{this.state.schedules.map((l, i) => {
return <Picker.Item value={l} label={i} key={i} /> })}
</Picker>
</View>
);
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Change);
2个回答
这不是 React Native 特有的错误。您将
schedules
初始化为
null
,因此在首次渲染时,您尝试在
null
上调用
.map
。这就是导致错误的原因。
您在
componentDidMount
中正确
fetch
了数据,但该生命周期方法将在首次渲染后触发。
解决此问题的常用方法是将
schedules
初始化为空数组。
Michael Cheng
2019-09-19
首先在空数组状态下初始化
schedules: []
,而不是使用 null。
在
componentDidMount()
中获取数据是正确的。
ComponentDidMount()
将在组件首次渲染后调用,因此您必须从更新的存储中更新组件中的状态。
您可以在
componentWillReceiveProps (depreciated)
或 componentWillReceiveProps 方法的最新替代方案
getDerivedStateFromProps()
中检查 props 是否正在更改。
以下是两者的语法
componentWillReceiveProps(nextProps) {
if (this.props.schedules !== nextProps.schedules) {
this.setState({ schedules: nextProps.schedules });
}
}
static getDerivedStateFromProps(nextProps, prevState){
if (nextProps.schedules !== prevState.schedules) {
return { schedules: nextProps.schedules };
}
else return null; // Triggers no change in the state
}
确保您的组件应使用 connect 连接到存储
Shailendra Sahu
2019-09-19