Question

我正在使用map函数创建项目列表：

render() {

    var accounts = this.props.accounts.map((account, index) =>
        <li className="list-group-item" key={index}>{account[0]}<br />
            <button type="button" >Go to Login</button>
            <button type="button" >Log out</button>
        </li>
    );

    return (

        {accounts && (
            <ul className="accounts-list list-group">{accounts}</ul>
        )}

    )

}

这很好用，因为帐户是一个数组。

我需要对一个对象做同样的事情：

{
  "offer": [
    "id",
    "price-input"
  ],
  "offer_message": [
    "id",
    "msg-textarea"
  ]
}

代码：

forms = Object.entries(this.props.forms).forEach(([key, value]) =>

    <div className="form-group">
        {value}
    </div>

)

return (

    {forms}

)

这没有结果。实际上，forms是未定义的。我该如何从对象渲染列表？

谢谢

Answer 1

您使用的是forEach，它返回undefined。您想改用map。

还要确保将{forms}包裹在一个元素中，并为数组中的每个孩子提供一个key道具。

示例

class App extends React.Component {
  render() {
    const forms = Object.entries(this.props.forms).map(([key, values]) =>
      <div className="form-group" key={key}>
        {values.join(", ")}
      </div>
    );

    return <div>{forms}</div>;
  }
}

ReactDOM.render(
  <App
    forms={{
      offer: ["id", "price-input"],
      offer_message: ["id", "msg-textarea"]
    }}
  />,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

Answer 2

多行代码应放在括号中。否则，它将如您注意到的那样返回undefined：

=>
(
 <div className="form-group">
   {value}
  </div>
)

React将对象渲染到列表中

2 个答案: