时间戳

首页 > 解决方案 > 为什么在反应中使用映射函数在迭代中显示错误？

javascript - 为什么在反应中使用映射函数在迭代中显示错误？

问题描述

你能告诉我为什么我在 react 中使用 map 函数进行迭代吗？我注释掉我的代码，以便您可以查看我的代码并在我做错的地方向我提供反馈

这是我的代码 https://codesandbox.io/s/jzpr5o8x2v

function App() {
  console.log(a)
  return (
    <div className="App">
      <ul>
     { a.map(([title,arr])=>{
       return (
          <li>{title}</li>
          // arr.map(({ displaytext})=>{
          //   <li>{displaytext}</li>
          // })
        )
      })}
      </ul>
    </div>
  );
}

预期产出 

GENERAL
Mobile NUMBER 04061511
Abc NUMBER.  89999

Personal Info
Address.  g-78
local.   090099

此代码不起作用

 // arr.map(({ displaytext})=>{
          //   <li>{displaytext}</li>
          // })

标签： javascriptreactjs

解决方案

这里有几个问题：

  • 从函数返回 JSX 值时，返回值必须有一个根。您<li>与内部并排map。如果您不想用新元素包装所有内容，则可以使用<> ... </>包装所有内容。
  • 将 JSX 与代码表达式混合使用时，您需要{ }在代码周围放置。
  • 您没有在 inner 的回调中返回任何内容map。

这会产生描述的结果：

{ a.map(([title,arr])=>{
  return (
    <>
     <li>{title}</li>
     { arr.map(({ displaytext})=> <li>{displaytext}</li>) }
    </>
  )
})}

推荐阅读