.Net Core - React - TypeError: this.state.values.map не является функцией - App.UseEndpoint

#reactjs #asp.net-core-webapi #asp.net-core-3.1

Вопрос:

Я изучаю React, и у меня есть рабочий API, который подходит для этой цели, и теперь ему нужен интерфейс. На данный момент я пытаюсь доказать, что я могу получить данные и что политика CORS работает так, как я надеюсь / ожидаю.

Как вы увидите на изображении, я могу попасть в конечную точку, и в консоли я вижу данные.

На данный момент это мой код, который хотя и является концепцией, но не использует перехватчики реакции (это будет позже)

 state = {
values: [],
};

componentDidMount() {
 axios.get('https://localhost:5001/get-countries').then((response) => {
   console.log(response);
   this.setState({
     values: response.data,
   });
   console.log(this.state.values);
 });
}
... ommitted code

<ul>
    {this.state.values.map((value: any) => (
    <li>
     ... more ommitted code
    </li>
    ))}
</ul>

Когда я запускаю это, я получаю сообщение об ошибке

Ошибка типа: this.state.values.map не является функцией

API использует конечные точки Ardalis и шаблон Mediatr, который на данный момент нельзя изменить, поскольку он является частью более широкого проекта.

Итак, вопрос в том, как мне предотвратить выдачу ошибки.

1. Насколько я вижу, state.values не содержит массива, он содержит объект countries . Поэтому вы должны изменить его на state.values.countries.map(...

2. @ibubi если я это сделаю, я получу ошибку компиляции Свойство countries не существует для типа never[] . Я также не могу сделать значения массивом ICountry

3. Моя ошибка, вы должны назначить страны, подобные; values: response.data.countries; и оставить другую строку такой, какая она есть, state.values.map(...

4. Спасибо, ты звезда. Если бы вы могли предоставить это в качестве официального ответа, я мог бы поддержать ответ и наградить баллы

Ответ №1:

Согласно комментарию,

Ошибка указывает на то, что state.value данные не содержат массива, вы присваиваете объект countries объекту state.value . Вместо этого вы должны сами назначить страны;

 this.setState({
  values: response.data.countries,
});