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

Answer 2

这里不需要花括号

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

或明确返回地图

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

函数不会在React中渲染元素

2 个答案: