reactjs - .Net Core - React - TypeError：this.state.values.map 不是函数 - App.UseEndpoint

Question

我正在学习 React，我有一个适合用途的有效 API，现在需要一个前端。目前，我希望证明我可以获取数据，并且 CORS 政策正在按我希望/预期的方式工作。

正如您从图像中看到的那样，我可以点击端点并在控制台中看到数据。

目前这是我的代码，虽然是概念，但没有使用 React Hooks（稍后会介绍）

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>

当我运行它时，我得到了错误

TypeError：this.state.values.map 不是函数

API 使用的是 Ardalis Endpoints 和 Mediatr 模式，此时无法更改，因为它是更广泛项目的一部分。

所以，问题是我如何阻止它给出错误。

标签： reactjsasp.net-core-webapiasp.net-core-3.1

Answer 1

根据评论，

错误表示state.value数据不包含数组，您正在将国家对象分配给state.value. 相反，您应该自己指定国家；

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