反应 .map 不呈现

Question

我想循环播放一个道具 screenshots 但它对我不起作用！我曾经在其他组件中这样做过并且它正在工作。我快疯了:(

请在下面找到我的代码：

              {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

失踪 return！！您可以使用“()”来return立即数。

{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!'
});

箭头函数没有大括号 自动return你的语句并且它必须只与一个语句一起使用。

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>
)}

您可以阅读有关 arrow functions at w3schools 的更多信息。

反应 .map 不呈现

react .map does not render

javascript

loops

render

reactjs