Question

我无法隔离和理解的以下逻辑存在缺陷。我有一个React dapp（去中心化应用），它具有侦听以太坊区块链上的事件的功能。该函数获取事件结果并将其存储在组件的状态中：

this.setState(prevState => ({
  eventData: [
    ...prevState.eventData,
    result[0].args
  ]
}))

如果看到console.log(this.state.eventData)，我会看到：

[
    [{
            "logIndex": 0,
            "transactionIndex": 0,
            "transactionHash": "0xec912b5811f72b9e821fd62f7c79e45c09c641bb9bf4fff3be9e4997be27cd76",
            "blockHash": "0x84f988d6611ba75e8321e20abf23620d68efb0ff721b85447b8072cd5ff07525",
            "blockNumber": 16,
            "address": "0x985b025b6baa40c6d5c7247f4d608efdfc24b81b",
            "type": "mined",
            "event": "EventOne",
            "args": {
                "paramOne": "0x6a7a88d1f9f6250e1115d05a0489e584d0a0c7c0",
                "paramTwo": "90",
                "paramThree": "2",
                "paramFour": "479",
                "paramFive": "110123595505617976",
                "paramSix": "1",
                "paramSeven": true
            }
        },
        {
            "logIndex": 0,
            "transactionIndex": 0,
            "transactionHash": "0x776ecfd9a1efe0a0d399a4a3d56f2121d5305e4d3219c13ca4e960bcdcce460c",
            "blockHash": "0x109907689e47d96a61bffc0ec4eac5cf4295361d57c9a25fe53aa68e1412eadc",
            "blockNumber": 18,
            "address": "0x985b025b6baa40c6d5c7247f4d608efdfc24b81b",
            "type": "mined",
            "event": "EventOne",
            "args": {
                "paramOne": "0x6a7a88d1f9f6250e1115d05a0489e584d0a0c7c0",
                "paramTwo": "90",
                "paramThree": "17",
                "paramFour": "480",
                "paramFive": "110123595505617976",
                "paramSix": "2",
                "paramSeven": true
            }
        }
    ]
]

然后，我需要遍历状态对象并呈现结果，为此，我具有以下功能。有一种逻辑可以检查另一个状态，如果不满足条件，则可以检查另一个状态。然后，它映射this.state.eventData的结果：

{this.state.eventData
        .filter(
          data =>
            this.state.allRecords|| this.state.account === data.paramOne
        )
        .slice(0, 10)
        .reverse()
        .map(
          (
            {
              paramOne,
              paramTwo,
              paramThree,
              paramFour,
              paramFive,
              paramSix
            },
            i
          ) => (
            <div className="event-result-table-container" key={i}>
              <div className="result-cell">{paramOne}</div>
              <div className="result-cell">
                <span>{paramTwo? "Win" : "Lose"}</span>
              </div>
              <div className="result-cell">{paramThree}</div>
              <div className="result-cell">{paramFour}</div>
              <div className="result-cell">{paramFive/ 10000}</div>
              <div className="result-cell-last">{paramSix}</div>
            </div>
          )
        )}

预期结果： 我看到了来自this.state.eventData的带有已填充数据的渲染块。

观察结果： 由于某些原因，字段为空。

这可能是什么问题？

Answer 1

paramOne, paramTwo, paramThree...在地图中未定义

尝试这样

.map(
          (
            {args},
            i
          ) => (
            <div className="event-result-table-container" key={i}>
              <div className="result-cell">{args.paramOne}</div>
              <div className="result-cell">
                <span>{args.paramTwo? "Win" : "Lose"}</span>
              </div>
              <div className="result-cell">{args.paramThree}</div>
              <div className="result-cell">{args.paramFour}</div>
              <div className="result-cell">{args.paramFive/ 10000}</div>
              <div className="result-cell-last">{args.paramSix}</div>
            </div>
          )
    )}

Answer 2

您甚至可以指定@aseferov回答您想通过第二次破坏来做的事情

.map(
      (
        {args: {
          paramOne,
          paramTwo,
          paramThree,
          paramFour,
          paramFive
        }},
        i
      ) => (
        <div className="event-result-table-container" key={i}>
          <div className="result-cell">{args.paramOne}</div>
          <div className="result-cell">
            <span>{args.paramTwo? "Win" : "Lose"}</span>
          </div>
          <div className="result-cell">{args.paramThree}</div>
          <div className="result-cell">{args.paramFour}</div>
          <div className="result-cell">{args.paramFive/ 10000}</div>
          <div className="result-cell-last">{args.paramSix}</div>
        </div>
      )
)}

如果您想更好地理解该主题，可以here观看。

反应状态对象解析问题

2 个答案: