React fetch接口赋值useState后调用map提示不是函数问题求助

错误原因与修复方案 #

1. 核心原因：API返回值不是数组 #

choices.map is not a function 本质是执行map时choices变量不是数组类型。你虽然给choices设置了空数组的初始值，但请求拿到的json_data大概率不是数组结构：

• 绝大多数接口会把列表数据放在对象的某个字段下，比如{ "code": 200, "data": [ {...}, {...} ] }，你直接把整个返回对象赋值给choices，就会导致choices从数组变成对象，失去map方法。
• 你可以直接看控制台打印的json_data结构，确认列表数据对应的字段名，修改赋值逻辑即可，比如列表在data字段下就改为setChoices(json_data.data)。

2. 补充：条件判断逻辑不严谨 #

你当前用!loading&&choices&&做判断，只能排除choices为null/undefined的情况，如果接口返回对象、字符串等非空但非数组的值，依然会命中报错。把判断修改为Array.isArray(choices)即可规避：

{!loading && Array.isArray(choices) && choices.map(/* 你的渲染逻辑 */)}

3. 其他附带错误 #

• 你在map的key属性中直接写了未定义的变量car1，会额外抛出变量未定义报错，建议用列表项的唯一值作为key，没有唯一值可以临时用索引替代：

  choices.map( (choice, index) => {
    const {option,make} = choice;
    return <div key={index}> {/* 替换成项的唯一id性能更好 */}
            <h1>{option}</h1>
            <h3>{make}</h3>
            </div>
  })
  

• 组件声明名是Publish，最后导出的是ApiTest，组件名不一致会导致组件引用异常，需要统一组件名。
• 请求逻辑没有加异常捕获，接口请求失败、JSON解析失败都会导致未捕获异常，建议给异步逻辑加上try/catch做兜底。

内容的提问来源于stack exchange，提问作者rnd om