javascript - 事件处理程序中的 React SetState 对于模拟数据和来自 API 的数据的行为有所不同

Question

我正在两个场景之间复制完全相同的情况(相同的代码)。

1. 数据被 mock
2. 通过 API 请求数据

1) 数据被模拟的案例 => https://codesandbox.io/s/select-demo-0e90s按预期工作

模拟的数据如下

const [items] = React.useState([
  { id: "1", name: "First Element" },
  { id: "2", name: "Second Element" },
  { id: "3", name: "Third Element" }
]);

setSelectedName(item.name) => 正确返回项目名称

2) API 请求案例(要允许请求 CORS 插件 Chrome 扩展程序必须激活)=> https://codesandbox.io/s/select-demo-71u7h

数据来自 action/index.js => fetchLeaguesList()

中的调用请求

在 League.js 组件中

setSelectedLeagueName(item.name) => TypeError 无法读取未定义的属性“name”，在本例中item 未定义

所以我的问题是为什么在我的第二种情况下 item 未定义？在这种情况下我该如何解决它？

Answer 1

这是因为在第 19 行的 League.js 中，您执行了以下操作const item = items.find(item => item.id === value);

但是从 API 返回的 JSON 模型不是由 id 属性形成的，而是由 league_id 形成的。

然后您应该将该行更改为const item = items.find(item => item.league_id == value);