javascript - 为什么返回的li标签不渲染？ ESlint 期待返回值

Question

在测试时，我遇到了这个错误。我阅读了 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"));

Answer 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>