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

How to return json data to a react state?

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 }

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

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

I have tried

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

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

Thanks much!

回答1:

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

回答2:

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

Destructuring operator is your friend

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

回答3:

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

This is how you would set the state:

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

Tthe finished state would then be:

{
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

来源：https://stackoverflow.com/questions/53749081/how-to-set-state-of-a-react-component-with-a-specific-item-from-a-returned-json