Как установить состояние реагирующего компонента с определенным элементом из возвращенного объекта json?

Question

Это вопрос к предыдущему обсуждению

Как вернуть данные json в состояние реакции?

Мой компонент реагирования делает 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 только с transactionHash из вышеупомянутого json и ничего больше.

Большое спасибо!

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

Answer 2

Вам необходимо выяснить, где в объекте 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"

}

Конечно, вы можете использовать деструктуризацию, но сначала нам нужно знать форму данных, которые возвращаются с сервера

Answer 3

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