React map函数问题

Question

我是新来的React和JS。

我有这段代码，但是“行”在console.log输出中是未定义的。我猜我的map函数是不正确的，但我不知道为什么。

const stubData = [
  { id: "435879430589041", customer: "jdus", status: "OK" },
  { id: "435879430589042", customer: "jdfr", status: "OK" },
  { id: "435879430589043", customer: "jdnl", status: "pending" },
  { id: "435879430589044", customer: "wsi", status: "config" },
  { id: "435879430589045", customer: "tkmaxx", status: "pending" },
];

const Rows = () => {
  const rows = stubData.map((c,i) => {
    (<tr key={i} value={c}>
      <td>{c.id}</td>
      <td>{c.customer}</td>
      <td>{c.status}</td>
    </tr>)
  }); 
  console.log(rows)
  return <tbody>{rows}</tbody>;
};

const ListIntegrations = props => {
  return (
    <table className="table table-hover">
      <Headers />
      <Rows />
    </table>
  );

Headers返回完美的headers。

Answer 1

你不会返回地图上的任何东西。添加一个return语句：

  const rows = stubData.map((c,i) => {
    return (<tr key={i} value={c}>
      <td>{c.id}</td>
      <td>{c.customer}</td>
      <td>{c.status}</td>
    </tr>)
  }); 

...or删除花括号，从而隐式返回：

  const rows = stubData.map((c,i) => 
    (<tr key={i} value={c}>
      <td>{c.id}</td>
      <td>{c.customer}</td>
      <td>{c.status}</td>
    </tr>)
  ); 

Answer 2

您不是从地图返回

stubData.map((c,i) => {
    (<tr key={i} value={c}>
      <td>{c.id}</td>
      <td>{c.customer}</td>
      <td>{c.status}</td>
    </tr>)
  }); 

将其更改为

stubData.map((c,i) => {
    return (<tr key={i} value={c}>
      <td>{c.id}</td>
      <td>{c.customer}</td>
      <td>{c.status}</td>
    </tr>)
  }); 

Answer 3

因为您使用箭头函数作为map的回调函数。如果没有大括号，{}箭头函数隐式返回

const rows = stubData.map((c,i) => 
(<tr key={i} value={c}>
  <td>{c.id}</td>
  <td>{c.customer}</td>
  <td>{c.status}</td>
</tr>)
);

或者，如果使用大括号，则需要显式返回

const rows = stubData.map((c,i) => {
return
(<tr key={i} value={c}>
  <td>{c.id}</td>
  <td>{c.customer}</td>
  <td>{c.status}</td>
</tr>)
});