开发者问题收集

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