React中API响应对象无法直接map？useState初始值与类型解析问题

问题背景 #

在React项目中用Axios请求新闻API，将useState初始值设为空数组时，能正常把response.data.results（包含10个对象的数组）存入状态并通过map渲染；但当初始值设为空字符串时，尽管控制台显示响应是数组，调用map却报错responseData.map is not a function。改为空数组后问题解决，有两个疑问：

1. 为什么用typeof判断响应数据（数组）结果是object？
2. 为什么把数组存入初始值为空数组的状态后，不会形成数组嵌套？

疑问1：为什么typeof判断数组返回object？ #

这是JavaScript的语言特性：typeof运算符只能区分基本数据类型（string/number/boolean/undefined/symbol/bigint）和引用数据类型，而数组属于引用类型里的Object子类，所以typeof []的结果就是object。

如果要准确判断一个值是不是数组，应该用：

• Array.isArray(response.data.results)：这是最可靠的方法，能跨iframe判断
• response.data.results instanceof Array：但在跨iframe场景下可能失效

疑问2：为什么存入数组后不会形成嵌套？ #

因为React的useState是替换式更新，不是合并式更新。当你调用setResponseData(response.data.results)时，状态会直接被替换成传入的数组，不管初始值是空数组还是空字符串，都不会把新值和旧值合并。

举个例子：

• 初始状态：const [data, setData] = useState([])
• 调用setData([{id:1}, {id:2}])后，状态就变成[{id:1}, {id:2}]，而不是[[{id:1}, {id:2}]]

当初始值设为空字符串时，组件第一次渲染会用空字符串执行map，但字符串没有map方法，所以报错；改成空数组后，第一次渲染时空数组调用map不会执行任何遍历，请求成功后状态被替换成数据数组，就能正常渲染。

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