Question

能否请您告诉我为什么在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>
          // })

Answer 1

这里有几个问题：

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

这将产生描述的结果：

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

Answer 2

您需要正确遍历a并返回元素。

function App() {
  console.log(a);
  return (
    <div className="App">
      <ul>
        {a.map((elem, index) => {
          return (
            <li key={index}>
              {elem[0]}
              <ul>
                {elem[1].map(nestedEle => {
                  return [
                    <li key={1}>{nestedEle.value}</li>,
                    <li key={2}>{nestedEle.type}</li>,
                    <li key={3}>{nestedEle.displaytext}</li>
                  ];
                })}
              </ul>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

代码箱：https://codesandbox.io/s/lr9j1x1v2m

为什么在反应中使用map函数在迭代中显示错误？

2 个答案: