函数不会在 React 中渲染元素

Question

我是 React 的新手，请多多包涵。这是我的代码：

import * as React from "react";
import { render } from "react-dom";

import "./styles.css";

function App() {
  var state = {
    people:
      [
        {
          id: 1,
          name: "Jhon",
        },
        {
          id: 2,
          name: "Ben",
        }
      ]
  }
  var get_names = () =>
  {
    state.people.map(people => {
      return <p>{people.name}</p>
    })
  }
  return (
    <div className="App">
     {
      get_names()
     }
    </div>
  );
}

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

出于某种原因，它不会生成任何元素。但是，如果我不使用这样的函数，代码就可以工作：

return (
    <div className="App">
     {
        state.people.map(people => {
          return <p>{people.name}</p>
        })
     }
    </div>
  );

我试过这个方法：

 return (
    <div className="App">
     {
      this.get_names()
     }
    </div>
  );

但它给了我这是未定义的。

然后我尝试了这个：

 return (
    <div className="App">
     {
      () => this.get_names()
     }
    </div>
  );

但再一次，没有任何渲染。这可能是菜鸟的错误，但有人能告诉我这里有什么问题吗？

这是一个现场演示：https : //codesandbox.io/s/404mjv65rx

Answer 1

你没有从 返回任何东西get_names。添加return关键字，它将按预期工作。

var get_names = () => {
  return state.people.map(people => {
    return <p key={people.id}>{people.name}</p>;
  });
};