时间戳

首页 > 解决方案 > 无法通过映射对象 ReactJS 来渲染组件

javascript - 无法通过映射对象 ReactJS 来渲染组件

问题描述

我正在使用 ethereum blochchain 和 ReactJS 开发一个 webapp。在一个页面中，在 componentDidMount() 内部，我从区块链收集数据并将其添加到名为 requests 的数组中

typeof(requests) : object


console.log(requests) :(2) [Result, Result] 
0: Result
   0: "Title"
   1: "100000000000000"
   2: "0xbA439F3C91bF0732e5546721A09be207f69555ca"
   3: false
   4: "0"
   approvalCount: "0"
   complete: false
   description: "Title"
   recipient: "0xbA439F3C91bF0732e5546721A09be207f69555ca"
   value: "100000000000000"
   __proto__: Object
1: Result
   0: "New Request"
   1: "4000000000000000000"
   2: "0x8104Ce1f3d731A5C39501fddDdc14E2673555555"
   3: false
   4: "0"
   approvalCount: "0"
   complete: false
   description: "New Request"
   recipient: "0x8104Ce1f3d731A5C39501fddDdc14E2673555555"
   value: "4000000000000000000"
   __proto__: Object
length: 2
__proto__: Array(0)

我尝试使用以下代码根据请求的元素呈现组件：

     <body>
              {this.state.requests.map((request, index) => {
            return (
              <RequestRow
                key={index}
                id={index}
                address={this.state.address}
                request={request}
                approversCount={this.state.approversCount}
              />
            );
          })}
            </body>

但是出现这个错误

Error: Objects are not valid as a React child (found: object with keys {id, address, request, approversCount}). If you meant to render a collection of children, use an array instead.

如何解决这个问题？

RequestRow 不完整

它被实现为

import React from "react";

const requestRow = (props) => <div>{props}</div>;

export default requestRow;

标签： javascriptreactjsreact-native

解决方案

您不需要为空数组条件编写代码。你只需要写，

  <body> {
    this.state.requests.map((request, index) => {
        return ( <RequestRow key = {
                index
            }
            id = {
                index
            }
            address = {
                this.state.address
            }
            request = {
                request
            }
            approversCount = {
                this.state.approversCount
            }
            />
        );
    });
}</body>

推荐阅读