ReactJS - Цикл с функцией карты, не отображающей представление [дубликат]

avatar
calveeen
9 августа 2021 в 03:47
103
2
0

Я знаю, что это вроде как базовый вопрос... но я только изучаю React и еще не так хорошо знаком с Javascript.

App.js

  return (
    <div >
      <h1>My Weather dashboard</h1>
      <div className="container">
        {weatherCards.map((obj, index) => {
           <Card {...obj}/>
        })}
      </div>
    </div>
  )

Card.js

const Card = ( props ) => {
    
    return (
        <div className="card">
            <img src={props.iconLink}/>
            <div className="caption">{props.iconName}</div>
            <h3>Day: {props.day}</h3>
            <h3>time: {props.time}</h3>
            <h3>temperature: {props.temperature}</h3>
        </div>
    )
}
export default Card

На карте ничего не отображается.

Источник

Ответы (2)

avatar
Hyetigran
9 августа 2021 в 03:48
2

Похоже, вы забыли возврат в методе карты

<div className="container">
        {weatherCards.map((obj, index) => {
           return <Card {...obj}/>
        })}
      </div>
Matt U
9 августа 2021 в 03:52
0

В качестве альтернативы OP может исключить фигурные скобки и просто сделать weatherCards.map(obj => <Card {...obj} />). Тогда не нужно return, так как они просто хотят вернуть элемент.

avatar
moshfiqrony
9 августа 2021 в 03:55
0

Вы можете напрямую вернуть компонент, как показано ниже

  return (
    <div >
      <h1>My Weather dashboard</h1>
      <div className="container">
        {weatherCards.map((obj, index) => <Card {...obj}/>)}
      </div>
    </div>
  )

Итак, в стрелочной функции, если вы что-то дадите после =>, это будет возвращаться на каждой итерации. Поэтому, если вы укажете {}-Which is a function body, он вернет тело функции. Но если вы укажете какую-либо переменную или Componenet, она вернет это напрямую. Мы делаем это, если нам нужно вернуть любой простой объект. Но иногда вам нужно выполнить какое-то логическое выполнение, на этот раз вы можете определить тело функции. Но поскольку вы определяете тело функции, вы должны использовать ключ return, как показано ниже

  return (
    <div >
      <h1>My Weather dashboard</h1>
      <div className="container">
        {weatherCards.map((obj, index) => {
           // your code here
           return <Card {...obj}/>
        })}
      </div>
    </div>
  )