React前端展示Node接口数组时map函数报错的问题咨询

你的问题主要出在后端响应逻辑冲突和前端fetch的Promise链处理失误两个地方，咱们一步步拆解解决：

1. 后端Node.js的响应重复问题 #

看你的后端代码，你同时调用了res.render()和res.send()：

res.render('map', { characterList: JSON.stringify(characterList), });
res.send(characterList);

HTTP协议要求每个请求只能返回一次响应，res.render()已经向客户端发送了页面渲染的响应，后续的res.send()不仅不会生效，还会在服务器端触发错误。这就导致前端fetch拿到的不是你预期的characterList数组，而是res.render()返回的页面内容，解析成JSON自然会出问题。

修正方案：删掉res.render()这行代码，只保留res.send(characterList)，让后端正确返回数组：

router.get('/', function (req, res, next) {
 var characters = [
 { "id": 1, "name": "Mickey", "username": "Mouse", "yearCreation": 1928 },
 { "id": 2, "name": "Donald", "username": 'Duck', "yearCreation": 1934 }
 ];
 // 这里的reduce完全没必要，直接用characters数组即可
 var characterList = characters;
 // 只保留这一行响应
 res.send(characterList);
});

2. 前端fetch的Promise链丢失数据 #

再看你前端的fetch代码：

fetch("http://localhost:9000/disneyCharacter")
 .then(res => res.json())
 .then(res => console.log(res))
 .then(res => setApiResponse(res))

Promise链里的每个then如果没有返回值，下一个then拿到的参数就是undefined。你第二个then只做了console.log(res)，没有返回res，所以第三个then里的res就是undefined，调用setApiResponse(undefined)后，apiResponse自然变成了undefined，调用map时就会报错。

修正方案：在console.log的then里返回res，或者把日志操作合并到下一个then中：

const callAPI = () => {
 fetch("http://localhost:9000/disneyCharacter")
 .then(res => res.json())
 .then(res => {
   console.log(res);
   return res; // 必须返回res，才能传递到下一个then
 })
 .then(res => setApiResponse(res))
 // 建议加上错误捕获，避免请求失败导致的后续问题
 .catch(err => console.error('请求失败:', err))
}

额外优化建议 #

• 虽然你初始化apiResponse为[]，但如果请求失败的话仍可能变成undefined，可以在渲染时加个安全判断：

<p style={{color: 'white'}}>
 {apiResponse?.map(character => (<p key={character.id}>{character.name}</p>))}
</p>

这里用了可选链操作符?.，如果apiResponse是undefined或null，就不会执行map，避免报错；另外给每个map生成的元素加上key属性，这是React列表渲染的规范要求。

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