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

Question

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

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，没有别的。

非常感谢！

Answer 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 });
});

Answer 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
        }
    });
});

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

}

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