如何通过返回的json对象中的特定项设置react组件的状态? [英] How to set state of a react component with a specific item from a returned json object?

问题描述

这是上一个主题的后续问题

This is a follow up question to the previous thread

如何将json数据返回到反应状态?

我的react组件将axios.post设置为express服务器.服务器使用web3将事务签名到Ethereum上. Ethereum返回以下json对象.需要注意的是，返回json需要花费一些时间(几秒钟到几分钟，具体取决于矿工):

My react component makes an axios.post to an express server. The server uses web3 to sign a transaction onto Ethereum. Ethereum returns the following json object. Of note is that it takes some time (seconds to minutes depending on the miners) for the json to be returned:

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

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

Here is the code I am using to make the axios.post and set the state:

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})时，我返回了看似无止境的一系列构造函数和道具.

When I console.log({ items: this.state.items}) I am returned a seemingly endless array of contructors and props.

我尝试过

this.setState({ items : items.transactionHash });和console.log( { items: this.state.items.transactionHash})均无效.

this.setState({ items : items.transactionHash }); and console.log( { items: this.state.items.transactionHash}), neither worked.

我需要做的是set.state，其中只有上述json中的transactionHash，而没有其他内容.

What I need to do is set.state with only the transactionHash from the above json and nothing else.

非常感谢！

推荐答案

您需要找出transactionHash在json对象中的位置.

You need to find out where in the json object that transactionHash is located.

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

To find out the structure log the output first and examine the console.

console.log(res.data)

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

If the lets assume its under the data object eg:

"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"

}

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

You can of course use destructuring but first we need to know the shape of the data that is coming back from the server

这篇关于如何通过返回的json对象中的特定项设置react组件的状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！