Question

我有一个像这样的数据结构{key：[object array]}。我想使用嵌套的for循环渲染对象数组中的每个元素，如下所示：

for each entry(k, v) in map:
    for each element in array v:
        display html data

我正在使用React版本16。

我在JSX中尝试过：

class Positions extends React.Component {
    renderPosition(position) {
        var expiry = position["ExpiryDay"] + "-" + position["ExpiryMonth"] + "-" + position["ExpiryYear"];
        console.log(expiry);
        return (<label>{expiry}</label>);
    }
    render() {
        return (
            <div>
                {this.props.positionsGrouped.forEach(function(positions) {
                    return (
                        <div>
                            {positions.map(function(position) {
                                return (
                                    <div>
                                        {this.renderPosition(position)}
                                    </div>
                                );
                            }.bind(this))}
                        </div>
                    );
                }.bind(this))}
            </div>
        );
    }
}

这是它可以编译为的JS：

class Positions extends React.Component {
    renderPosition(position) {
        var expiry = position["ExpiryDay"] + "-" + position["ExpiryMonth"] + "-" + position["ExpiryYear"];
        console.log(expiry);
        return React.createElement(
            "label",
            null,
            expiry
        );
    }
    render() {
        return React.createElement(
            "div",
            null,
            this.props.positionsGrouped.forEach(function (positions) {
                return React.createElement(
                    "div",
                    null,
                    positions.map(function (position) {
                        return React.createElement(
                            "div",
                            null,
                            this.renderPosition(position)
                        );
                    }.bind(this))
                );
            }.bind(this))
        );
    }
}

但是，除了最上面的div，我什么都看不到。这是渲染的html：

<div id="app">
    <div></div>
</div>

这是我在React开发人员工具中看到的：

<App>
    <Positions>
        <div></div>
    </Positions>
</App>

我在控制台中看不到任何错误。我希望至少渲染三个嵌套的div，但是我只看到一个，因此听起来像是在第一个for循环的级别上有问题。但是，我确实看到我的到期变量已正确打印到控制台，所以我知道renderPosition正在使用正确的数据调用。

有人知道我在做什么错吗？我是新来的，对您的错别字感到抱歉。预先感谢。

Answer 1

this.props.positionsGrouped.forEach将返回未定义。我的意思是它不会返回任何东西。所以什么也没渲染。

Answer 2

只需更改您的组件代码

import React from "react";
class Positions extends React.Component {
  constructor(props) {
    super(props);
    this.renderPosition = this.renderPosition.bind(this);
  }
  renderPosition(position) {
    var expiry = position["name"] + "-" + position["title"];
    console.log(expiry);
    return <label>{expiry}</label>;
  }
  render() {
    const { positionsGrouped } = this.props;
    return (
      <div>
        {positionsGrouped.map(positions => {
          const keys = Object.keys(positions);
          return (
            <div>
              {positions[keys[0]].map(position => {
                return <div>{this.renderPosition(position)}</div>;
              })}
            </div>
          );
        })}
      </div>
    );
  }
}
export default Positions;

在您的父文件中

import React from "react";
import ReactDOM from "react-dom";
import Position from "./test";
import "./styles.css";

function App() {
  var positionGroup = [
    {
      a: [
        {
          name: "hello",
          title: "sdfd"
        },
        {
          name: "hello",
          title: "sdfd"
        },
        {
          name: "hello",
          title: "sdfd"
        }
      ]
    },
    {
      b: [
        {
          name: "hello",
          title: "sdfd"
        },
        {
          name: "hello",
          title: "sdfd"
        },
        {
          name: "hello",
          title: "sdfd"
        }
      ]
    }
  ];
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Position positionsGrouped={positionGroup} />
    </div>
  );
}

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

Answer 3

无论您在回调函数中返回什么，forEach的返回值为undefined。改用map。

class Positions extends React.Component {
  getExpiry(position) {
    return `${position.ExpiryDay}-${position.ExpiryMonth}-${position.ExpiryYear}`;
  }

  render() {
    return (
      <div>
        {this.props.positionsGrouped.map(positions => (
          <div>
            {positions.map((position) => (
              <div>
                <label>{this.getExpiry(position)}</label>
              </div>
            ))}
          </div>
        ))}
      </div>
    );
  }
}

为了使代码更简洁，我对代码进行了一些更改。

在嵌套循环中反应渲染HTML元素

3 个答案: