Блог

Главная - Вопросы по программированию - Почему возвращаемый тег li не отображается? ESLint ожидает возвращаемое значение

Почему возвращаемый тег li не отображается? ESLint ожидает возвращаемое значение

#javascript #reactjs

#javascript #reactjs

Вопрос:

Во время тестирования я столкнулся с этой ошибкой. Я прочитал документы React и продолжил использовать .map, => и

  • тег в соответствии с их документацией, но ничего не отображается на экране. Если я смогу указать правильное направление, это было бы очень ценно. 

     import React from "react";
import ReactDOM from "react-dom";
import { render } from "react-dom";

import "./styles.css";

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      ideas: [
        {
          title: "Titanic",
          director: [
            {
              James: "Cameron"
            }
          ],
          year: 1998
        },
        {
          title: "Star Wars",
          director: [
            {
              George: "Lucas"
            }
          ],
          year: 1974
        },
        {
          title: "Alien",
          director: [
            {
              Ridley: "Scott"
            }
          ],
          year: 1985
        }
      ]
    };
  }

  render() {
    const { ideas } = this.state;
    return (
      <div>
        <h1> hi </h1>
        {ideas.map((item, index) => {
          <li key={index}>{item.title}</li>;
        })}
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

    • Комментарии:

    1. Это потому, что вы ничего не возвращаете. Либо используйте круглые скобки, либо добавьте явный возврат между фигурными скобками. Синтаксис см. в MDN

    2. Ваши элементы <li> не обернуты тегом <ul> или <ol>

    Ответ №1:

    Обратный вызов, переданный в .map() , должен вернуть <li> :

       <div>
    <h1> hi </h1>
    {ideas.map((item, index) => {
      return (<li key={index}>{item.title}</li>);
//    ^^^^^^
    })}
  </div>

    Или неявный возврат :

       <div>
    <h1> hi </h1>
    {ideas.map((item, index) => (<li key={index}>{item.title}</li>))}
  </div>

    Комментарии:

    1. Спасибо за разъяснение. Я не понимал, что вы должны заключить li в круглые скобки для неявного возврата