如何使用返回的 json 对象中的特定项目设置反应组件的状态？

Posted 2023-02-18

【中文标题】如何使用返回的 json 对象中的特定项目设置反应组件的状态？

【英文标题】：How to set state of a react component with a specific item from a returned json object?

【发布时间】：2019-05-13 21:58:41

【问题描述】：

这是上一个帖子的后续问题

How to return json data to a react state?

我的反应组件将axios.post 发送到express 服务器。服务器使用web3 在Ethereum 上签署交易。 Ethereum 返回以下 json 对象。值得注意的是，返回 json 需要一些时间（几秒到几分钟，具体取决于矿工）：

 blockHash: '0xcd08039bac40e2865886e8f707ce9b901978c339d3abb81516787b0357f53fbd',
  blockNumber: 4611028,
 ...other data...
  transactionHash: '0x12c65523743ed169c764553ed2e0fb2af1710bb20a41b390276ffc2d5923c6a9',
  transactionIndex: 1 

这是我用来制作axios.post 并设置状态的代码：

import React from "react";
import PaypalExpressBtn from "react-paypal-express-checkout";
import axios from "axios";

export default class Pay extends React.Component 

constructor(props) 
 super(props);
 this.state = 
  items: 
  ;
 

  render() 
    const onSuccess = payment => 
      axios
        .post("http://compute.amazonaws.com:3000/", 
          value: this.props.value,
          fileName: this.props.fileName,
          hash: this.props.hash
        )
        .then(response => console.log(response.data))
        .catch(function(error) 
          console.log(error);
        );

      console.log(payment);
    ;

    let env = "sandbox"; // you can set here to 'production' for production
    let currency = "USD"; // or you can set this value from your props or state
    let total = 3.33; // same as above, this is the total amount (based on 

    const client = 
      sandbox:
        "...key...",
      production: "YOUR-PRODUCTION-APP-ID"
    ;

    return (
      <div>
        <PaypalExpressBtn
          onSuccess=onSuccess
        />
      </div>
    );
  

当我console.log( items: this.state.items) 时，我返回了看似无穷无尽的构造函数和道具。

我试过了

this.setState( items : items.transactionHash ); 和 console.log( items: this.state.items.transactionHash)，都不起作用。

我需要做的是set.state，只有上面json中的transactionHash，没有别的。

非常感谢！

【问题讨论】：

你能发布你当地的结构吗？

是的，我会将它包含在编辑中，并包含一些我尝试过的东西。谢谢。

【参考方案1】：

https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Operators/Destructuring_assignment#Basic_assignment

解构运算符是你的朋友

axios.post(
  "http://compute.amazonaws.com:3000/users",
  
    value: this.props.value,
    fileName: this.props.fileName,
    hash: this.props.hash
  
)
.then(res => 
  const items = res.data;
  const transactionHash =items
  this.setState( transactionHash );
);

【讨论】：

谢谢回复，返回Uncaught TypeError: Cannot read property 'items' of null 是不是因为挖区块并返回json数据需要时间？在将其设置为状态之前，我是否需要 await json 响应？

请 console.log(res.data) 并将其添加到您的问题中

我把它放在上面的评论中，但是 console.log(res.data) 没有返回任何东西。我认为原因是以太坊需要一些时间来挖掘交易并返回 json 对象。有什么想法吗？

【参考方案2】：

axios.post(
    "http://compute.amazonaws.com:3000/users", 
    
        value: this.props.value,
        fileName: this.props.fileName,
        hash: this.props.hash
    
)
.then(res => 
    const items = res.data;
    const  transactionHash  = items;
    this.setState( 
        items: 
            transactionHash
        
    );
);

【讨论】：

Uncaught TypeError: Cannot read property 'transactionHash' of null 的错误我认为这与以太坊花时间挖掘交易并返回 json 有关。知道如何在设置状态之前等待 json 吗？

其实 axios 正在为你做这件事。一旦从服务器发送响应，then 中的函数回调就会被触发。你能把res里的内容贴出来吗？

.then(res => console.log(res.data); ); 不返回任何内容...

这可能是您早早返回服务器端，就像您说的那样。但这超出了这个问题的范围。

为了清楚起见，我简化了上面的代码，这解决了错误但仍然没有返回。非常感谢您的时间和洞察力，我将开始一个新问题，就像这里回答的一样:)

【参考方案3】：

你需要找出transactionHash在json对象中的位置。

要找出结构，首先记录输出并检查控制台。

console.log(res.data)

如果让我们假设它在数据对象下，例如：

"data: 
"transactionHash": "0x12c65523743ed169c764553ed2e0fb2af1710bb20a41b390276ffc2d5923c6a9"

这是设置状态的方式：

axios.post(
  "http://compute.amazonaws.com:3000/users",
  
    value: this.props.value,
    fileName: this.props.fileName,
    hash: this.props.hash
  
)
.then(res => 
  console.log(res.data)
  this.setState( hash: res.data.transactionHash );
);

完成后的状态将是：

items: ,
hash: "0x12c65523743ed169c764553ed2e0fb2af1710bb20a41b390276ffc2d5923c6a9"

您当然可以使用解构，但首先我们需要知道从服务器返回的数据的形状

【讨论】：

感谢您的回复。我知道你要去哪里。 console.log(res.data) 没有返回值。我的假设是Ethereum 需要 30 秒左右才能返回json。所以没有数据可以res。我认为在记录和设置状态之前，我需要等待 Ethereum 的回复。我有点超出我的深度，不知道该怎么做！非常感谢您能给我的任何指导。

“then”部分仅在响应返回时发生。当你执行 console.log(res) 时，你得到了什么吗？查看网络选项卡下的 chrome 开发工具。您应该能够找到请求并看到错误或响应：developers.google.com/web/tools/chrome-devtools/…

.then(res => console.log(res); 没有返回任何内容

很难说。您应该在此函数中发布您的所有代码或更好，发布一个我们可以看到代码的链接，例如 codepen 或 github

再次感谢，我编辑了。如果您认为有帮助，将努力将其放在 github 上。