Реагировать. js asyn c Операция setState возвращает ноль

Question

Я использую операции asyn c для извлечения данных из моего собственного API, но иногда реагирует, не ждет завершения операции, и из-за этого мой объект состояния возвращает ноль и вызывает нулевую ошибку.

Конструктор:

 constructor(props) {
    super(props);
    this.openCase = this.openCase.bind(this);
    this.state = {
      reward: {},
      skins: [],
      caseImg: ""
    };
    this.fillCase = this.fillCase.bind(this);
  }

Мой код извлечения:

 fillCase = async () => {
    const link = encodeURI("https://localhost:44390/api/getskins");
    const response = await fetch(link);
    const data = await response.json();
    this.setState({ skins: data });
  };

И я вызываю fillCase перед монтированием компонента:

componentWillMount(){
this.fillCase();
}

Что такое ошибка?

Answer 1

Похоже, что data, полученный вами с сервера, содержит некоторые нулевые значения.

Попробуйте распечатать его во время получения данных, а также попробуйте отфильтровать его:

fillCase = async () => {
    const link = encodeURI("https://localhost:44390/api/getskins");
    const response = await fetch(link);
    const data = await response.json();
    console.log(data);
    this.setState({ skins: data.filter(d => d) });
};

Answer 2

здесь есть несколько проблем:

1. Прежде всего, вы не используете CWM для каких-либо операций asyn c. Вместо этого используйте CDM.

2. сделать ваш CDM асинхронным c, а не метод fillCase ().

Альтернативным подходом будет использование здесь хуков. поместите ваши логи извлечения данных c в ловушку useEffect. Это просто более чистый и гибкий способ сделать то же самое, если вы знакомы с крючками.

Answer 3

Вам нужно проверить, является ли скины пустым массивом

{ this.state.skins.length && this.state.skins.map....}