Question

嘿，我是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);

Answer 1

这不是特定于React Native的错误。您已将schedules初始化为null，因此在首次渲染时，尝试在.map上调用null。这就是导致您出错的原因。

您在fetch中正确componentDidMount了数据，但是该生命周期方法将在初始渲染后触发。

解决此问题的一种常用方法是将schedules初始化为空数组。

Answer 2

首先将schedules: []初始化为空数组而不是null。

在componentDidMount()中获取数据是正确的。 ComponentDidMount()将在首次渲染组件后被调用，因此您必须从更新后的商店中更新组件中的状态。

您可以在componentWillReceiveProps (depreciated)或getDerivedStateFromProps()的componentWillReceiveProps方法的最新替代方法中检查道具是否正在更改。

下面是两者的语法

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连接到商店

React Native：TypeError：this.state.schedule.map不是对象

2 个答案: