Console.log 显示正确的值，但映射值时该值未在 React/NextJS 中呈现

Question

我正在构建一个食品订购系统，运行遇到了在购物车本身内呈现购物车项目修饰符的问题。

console.log(mod.modName) 正确显示了我需要渲染的修改器的名称，但它不会显示在视图本身中。

此外，我测试了直接访问 customerMods (item.customerMods[0].modName) 的索引，这也在视图中呈现！我不明白我做错了什么...

非常感谢任何帮助！

item.customerMods数组：

[

    {
        "modId": "OZRRMJBDKWGX27LOHMXYY6OE",
        "modPrice": 0,
        "modName": "No Mustard"
    },
    {
        "modId": "YVDOLIGNDCTOORF7FJOBF534",
        "modPrice": 25,
        "modName": "Extra Ketchup"
    }
]

这是代码本身：

<ul>
      {items.map((item) => (
        <li key={item.id}>

          {item.quantity} x {item.name}  
          {item.customerMods.length > 0 ? item.customerMods.map((mod) => {
             //  {console.log(mod.modName)} -- Properly prints name of modifier
             <Text>{mod.modName}</Text>
               
          }) : "No Mods Here"}
          

          &mdash;
          <Button
            onClick={() => updateItemQuantity(item.id, item.quantity - 1) && console.log(items)}
          >
            -
          </Button>
          <Button
            onClick={() => updateItemQuantity(item.id, item.quantity + 1) && console.log(items)}
          >
            +
          </Button>
          <Button onClick={() => removeItem(item.id)}>&times;</Button>
        </li>
      ))}
    </ul>

Answer 1

{item.customerMods.length > 0 ? item.customerMods.map((mod) => {
             //  {console.log(mod.modName)} -- Properly prints name of modifier
             <Text>{mod.modName}</Text>
               
          }) : "No Mods Here"}

我在 map 回调中没有看到 return 语句。

Console.log 显示正确的值，但映射值时该值未在 React/NextJS 中呈现

Console.log is showing correct value, but the value is not rendering in React/NextJS when mapping values

mapping

object

console.log

reactjs

next.js