reactjs - React 将对象渲染到列表中

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>