реагировать .map не рендерит

Question

Я хочу l oop через реквизит скриншоты , но у меня это не работает! Я делал это в других компонентах, и это работало. Я схожу с ума: (

пожалуйста, найдите ниже мой код:

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

, это работает и отрисовывается отлично.

, но когда я делаю все oop как

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

что внутри l oop не отображается! И консоль не показывает никаких ошибок.

пожалуйста, помогите?

Answer 1

При использовании map вы должны быть осторожны, что ставить после =>. Если вам нужно обрабатывать элементы массива при отображении, сделайте это:

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

Если вам просто нужно визуализировать JSX, сделайте это:

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

, поскольку => () неявно возвращая вещи между ().

Answer 2

В функциях стрелок фигурные скобки используются для затворов . Так что это обернет вашу функцию.

Если вы используете функцию стрелки с фигурными скобками , вы должны использовать 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 .

Answer 3

Отсутствует возвращение !! Вы можете использовать «()» для немедленного возврата.

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