React map项没有显示任何内容

Question

import React from 'react';
import "./css/App.css"

const App= () =>{
const test=["1","2"];
return
test.map((item)=>{
return
<div key={item} >{item}</div>
})
}
export default App;

这太奇怪了。我检查了控制台，什么也没说。请告诉我我犯了什么错误，或者什么可能会导致这一点。谢谢。

Answer 1

括号有问题。如果你想在不使用括号的情况下返回一些东西，你必须在一行中编写逻辑。您在后续行中编写的逻辑将不会在返回语句中进行验证。

同样，你需要一个父元素来包装你的map语句，让DOM知道用什么作为父容器来容纳所有的map元素。

例如: -

return test.map(item => <div key={item}>{item}</div>)

DOM看到的内容是:-

<div key={item}>{item}</div>
<div key={item}>{item}</div>
<div key={item}>{item}</div>
<div key={item}>{item}</div>
<div key={item}>{item}</div>
...

正如您所看到的，DOM不知道使用什么作为父容器来包装所有这些<div>语句。

因此，您可以使用React.Fragment或<></>来封装您的map语句。

您没有看到任何错误日志的原因是因为这实际上不是一个错误，而是错误的编写逻辑的方式。DOM不知道映射语句的输出。因此，它不会抛出错误。然而，如果你要写多个<div>语句，就像我上面提到的，而不是一个映射语句，你会得到错误，而在一个适当的代码编辑器，例如:VS code。

写代码的正确方式是:

import React from 'react';
import "./css/App.css"

const App= () =>{
const test=["1","2"];
return(
<>
{test.map(item => <div key={item}>{item}</div>)}
</>
);
}
export default App;

Answer 2

try this->

const App = () => {
const test=["1","2"];
return(
<div>
test.map((item)=>{
return(<div>
<div key={item}>{item}</div>
</div>)
}))
</div>
}

Answer 3

试试这个:

import React from 'react';
import "./css/App.css"

const App= () =>{
const test=["1","2"];
return (
test.map((item) => (<div key={item} >{item}</div>))
)
}

export default App;

正如其他人指出的那样，您需要确保"返回"关键字和返回值在同一行

Answer 4

你可以看看下面的例子来了解一下。

function dot(){
return 
2;
}
console.log(dot());

查看JS引擎如何在return之后自动添加;。引擎可能永远不会到达你的代码。因为它看到了return;，所以它将从函数返回。

同样，所有的React组件都应该返回一个包含在一个元素中的JSX。所以请附上React片段。

import React from 'react';
import "./css/App.css"

const App= () =>{
const test=["1","2"];
return <>
test.map((item)=>{
return <div key={item} >{item}</div>
})
</>
}
export default App;