反应 .map 不呈现

Question

我想遍历道具截图，但它对我不起作用！ 我曾经在其他组件中这样做过并且它正在工作。 我快疯了:(

请在我的代码下面找到：

              {screenshots && <h2>Hello</h2>}

这有效并完美呈现。

但是当我做一个循环时

{screenshots && screenshots.length && screenshots.map(screenshot => {
    <div className="container img--container" key={screenshot.id}>
        <SVG
        className="icon remove--icon"
        src={removeCircle}
        />
       <img src={screenshot.image} title={"screenshot"} className="p-absolute"/>
    </div>
})}

循环内的内容没有被渲染！ 并且控制台没有显示任何错误。

请帮忙？

Answer 1

失踪归来！！ 您可以使用“()”立即返回。

{screenshots && screenshots.length && screenshots.map(screenshot => (
    <div className="container img--container" key={screenshot.id}>
        <SVG
        className="icon remove--icon"
        src={removeCircle}
        />
       <img src={screenshot.image} title={"screenshot"} className="p-absolute"/>
    </div>
))}

Answer 2

使用map ，您必须小心在=>后面放什么。 如果您必须在映射时处理数组元素，请执行以下操作：

array.map(a => { 
  // Javascript here
  return(
    <div>JSX here!</div>
  );
});

如果您只需要渲染 JSX，请执行以下操作：

array.map(a => (
    <div>JSX here!</div>
));

由于=> ()隐式返回()之间的内容。

Answer 3

在箭头函数中，大括号用于闭包。 所以它会包装你的功能。

如果使用带大括号的箭头函数，则必须使用return 。 像这样：

screenshots.map(screenshot => {
    console.log('I can do whatever I like here...');
    return 'but I have to return something!'
});

没有大括号的箭头函数会自动返回您的语句，并且只能与一个语句一起使用。

screenshots.map(screenshot => 
   'It returns this string without using word `return`!'
);

---

您的代码应如下所示（带有大括号和return ）：

{screenshots && screenshots.length && screenshots.map(screenshot => {
    console.log('Wow! I am in arrow function! I have to return something.');
    return 
        <div className="container img--container" key={screenshot.id}>
           <SVG className="icon remove--icon" src={removeCircle}/>
           <img src={screenshot.image} title={"screenshot"} className="p-absolute"/>
        </div>
})}

或者你可以像这样删除大括号：

{screenshots && screenshots.length && screenshots.map(screenshot =>
    <div className="container img--container" key={screenshot.id}>
        <SVG className="icon remove--icon" src={removeCircle}/>
       <img src={screenshot.image} title={"screenshot"} className="p-absolute"/>
    </div>
)}

---

您可以在 w3schools阅读更多关于箭头函数的信息。