Question

我是React和JS的新手。

我有这段代码，但console.log输出中未定义“行”。我猜我地图功能不正确，但我不知道为什么。

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

标题返回完美的标题。

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

...或删除大括号，从而使返回值隐含：

  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

当您使用箭头功能作为映射的回调时。如果您没有大括号{}箭头函数隐式返回

Erreur:
Uncaught TypeError: Cannot read property 'colspan' of undefined

http://10.0.1.178:8069/web/content/466-dc380e9/web.assets_backend.js:1635
Retraçage :
TypeError: Cannot read property 'colspan' of undefined
    at http://10.0.1.178:8069/web/content/466-dc380e9/web.assets_backend.js:1635:34
    at Function._.each._.forEach (http://10.0.1.178:8069/web/content/465-25ab684/web.assets_common.js:12:558)
    at Class._renderInnerGroup (http://10.0.1.178:8069/web/content/466-dc380e9/web.assets_backend.js:1634:63)
    at Class._renderTagGroup (http://10.0.1.178:8069/web/content/466-dc380e9/web.assets_backend.js:1648:228)
    at Class._renderNode [as _super] (http://10.0.1.178:8069/web/content/466-dc380e9/web.assets_backend.js:1640:246)
    at Class._renderNode (http://10.0.1.178:8069/web/content/466-dc380e9/web.assets_backend.js:2840:50)
    at Class._renderNode (http://10.0.1.178:8069/web/content/465-25ab684/web.assets_common.js:3541:371)
    at http://10.0.1.178:8069/web/content/466-dc380e9/web.assets_backend.js:1645:17
    at Function._.map._.collect (http://10.0.1.178:8069/web/content/465-25ab684/web.assets_common.js:13:270)
    at Class._renderOuterGroup (http://10.0.1.178:8069/web/content/466-dc380e9/web.assets_backend.js:1644:18)

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

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

反应地图功能问题

3 个答案: