React Javascript 数组内在函数答案

【问题标题】：React Javascript Array intrinsicsReact Javascript 数组内在函数
【发布时间】：2021-08-10 15:35:06
【问题描述】：

我想使用 map 函数包含 Title 数组，但出现错误。如何修改代码？

如何修复代码以避免错误？我今天只做这个。我觉得我真的很傻

首先，从 CartData 中获取数据。

const { data: CartData, error: CartError } = useSWR(http://localhost:3060/user/Carts, fetcher)

我试过 console.log。

console.log(CartData);


Object
email: alstntorl@naver.com
id: 1
Cartd: Array(4)
0: {id: 1, 
Title: 나이키 x 앰부쉬 덩크  딥 로얄 블루, 
 …}
1: {id: 11, 
Title: 뉴발란스 2002R 그레이, 
 …}
2: {id: 34, Title: 컨버스 하이크 하이 블랙 화이트 검,, …}
3: {id: 36, Title: 아디다스 이지 부스트 380 미스트, 10, …}
length: 4

我正在尝试使用地图功能获取标题信息。但我在这里得到一个错误。


 const result = CartData.Cartd.map((list) => list.Title);
 console.log(result);


Server Error
TypeError: Cannot read property Cartd of undefined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
.next\server\pages\mypage.js (32:28) @ mypage

  30 | 
  31 | 
> 32 |     const result = CartData.Cartd.map((list) => list.Title);
     |                            ^
  33 |     console.log(result);
  34 | 
  35 |

【问题讨论】：

React 在数据加载之前第一次渲染组件。当CartData.Cartd 是undefined 时，您不能使用CartData.Cartd.map。
我真的不知道，那怎么修改代码呢？
比如const result = CartData.Cartd ? CartData.Cartd.map((list) => list.Title) || [];，或者你可以使用developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
` const 结果 = CartData.Cartd ？ CartData.Cartd.map((list) => list.Title) || [];` 语法错误：意外的标记，应显示“：”。欢迎老师修改代码。我只需要打印标题。请帮忙
是的，抱歉，|| 应该是 :

标签： javascript reactjs ecmascript-6 frontend

【解决方案1】：

我猜是因为反应生命周期或异步。不管它是什么，你必须同时考虑它。所以我认为这个值可能不应该是'const'。

我建议在您的代码中使用可选链接。喜欢

let result = CardData?.Carted?.map(blahblah)

【讨论】：

` 让结果 = CartData?.Carted?.map((list) => list.Title) console.log(result); ` .听了老师的话，我试着安慰一下结果，结果出来了一个未定义的值。未定义的值出来了吗？
在可选链中，如果 prev_value 为 null 或 undefined，则整个值返回 undefined。所以这是正确的方法。换句话说，这意味着您的“CardData”或“Carted”为空。这样，如果从网络上获取数据，就不能同步了。
我建议你搜索一下 async-await 和 react-life-cycle。