遍历 JSON 并呈现表格元素不会产生任何结果答案

【问题标题】：Iterating over JSON and rendering table elements yield no result遍历 JSON 并呈现表格元素不会产生任何结果
【发布时间】：2019-08-08 12:26:36
【问题描述】：

我正在尝试在 React 中构建一个可重用的表格组件，但在渲染我的 <td>s 方面到目前为止还没有运气。

我将我需要的道具从TableList 组件传递给我的TableRow 组件，如下所示：

    const TableList = props => {
    const { listData, listHeaders } = props;

    return (
        <table className="table table-striped">
            <thead>
                <tr>
                    {listHeaders.map(header => (
                        <th scrope="col" key={header}>
                            {header}
                        </th>
                    ))}
                    <th scope="col" />
                </tr>
            </thead>
            <tbody>
                {listData.map(data => (
                    <TableRow
                        key={data.id}
                        data={data}
                        handleClick={props.handleClick}
                    />
                ))}
            </tbody>
        </table>
    );
};

在TableRow 中，我可以很好地迭代我的 JSON 对象，但我的元素没有呈现。我没有收到任何错误，但我在 DOM 中的 <tr> 元素中没有子元素。这是我的TableRows 组件：

    const TableRow = props => {
    const { data } = props;

    return (
        <tr>
            {Object.keys(data).forEach(function(item) {
                console.log(data[item]); // This prints out my JSON objects just fine
                <td key={item}>data[item]</td>; // But this element isn't rendering in the DOM
            })}
        </tr>
    );
};

我尝试将我的 JSON 对象分配给 .map() 导航的数组，但也得到了相同的结果。此外，我尝试在组件树上上下移动各种元素，如 <tbody> 和 <tr>，但没有成功。

【问题讨论】：

标签： javascript arrays reactjs

【解决方案1】：

你需要解决两件事

您需要将forEach() 更改为Array.prototype.map()，因为forEach() 方式返回undefined。
你应该使用()而不是{}。如果你想在jsx内部函数之前使用{}使用return

这是代码。

<tr>
   {Object.keys(data).map((item) => (
         <td key={item}>data[item]</td>; // But this element isn't rendering in the DOM
    )}
</tr>

【讨论】：

【解决方案2】：

const TableRow = props => {
const { data } = props;

return (
    <tr>
        {Object.keys(data).forEach(function(item) {
            console.log(data[item]); // This prints out my JSON objects just fine

            <td key={item}>data[item]</td>; // But this element isn't rendering in the DOM
        })}
    </tr>
    );
};

Object.keys(data).forEach() 不在这里，它不会返回任何东西。你应该做一个 Object.keys(data).map，并且对于每个键你应该返回一个 jsx。

const TableRow = props => {
const { data } = props;

    return (
        <tr>
            {Object.keys(data).map(function(item) {
                return <td key={item}>data[item]</td>; // But this element isn't rendering in the DOM
            })}
        </tr>
    );
};

应该可以正常工作。

【讨论】：

【解决方案3】：

您必须从循环中返回 JSX 元素。喜欢

return (
  <tr>
    {Object.keys(data).map(function(item) {
      console.log(data[item]); // This prints out my JSON objects just fine
      return <td key={item}>data[item]</td>; // But this element isn't rendering in the DOM
    })}
  </tr>
);

Array#forEach 返回undefined。目前，您正在渲染undefined。您可以使用Array#map，它用于转换输入数组并返回一个数组。

【讨论】：