React Native: TypeError: this.state.schedule.map не является объектом - PullRequest
Новая
       33

React Native: TypeError: this.state.schedule.map не является объектом

0 голосов
/ 19 сентября 2019

Эй, я новичок в 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 ]

2 голосов
/ 19 сентября 2019

Это не специфичная для React Native ошибка.Вы инициализировали schedules на null, поэтому при первом рендеринге вы пытаетесь вызвать .map на null.Вот что вызывает вашу ошибку.

Вы fetch правильно используете свои данные в componentDidMount, но этот метод жизненного цикла сработает после первоначального рендеринга.

Один из распространенных способов исправить это - инициализировать schedules пустым массивом..

0 голосов
/ 19 сентября 2019

Первая инициализация schedules: [] в состоянии с пустым массивом, а не с нулевым.

Выборка данных в componentDidMount() верна.ComponentDidMount() будет вызываться после первого рендеринга компонента, поэтому вам нужно обновить состояние в компоненте из обновленного хранилища.

вы можете проверить, меняется ли реквизит в componentWillReceiveProps (depreciated) или в последнемальтернатива метода componentWillReceiveProps, getDerivedStateFromProps().

Ниже приведен синтаксис для обоих 

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

...