本文介绍了如何使用返回的 json 对象中的特定项目设置反应组件的状态?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是对上一个线程的后续问题
如何将json数据返回到react状态?
我的 react 组件将 axios.post 发送到 express 服务器.服务器使用 web3 在 Ethereum 上签署交易.Ethereum 返回以下 json 对象.需要注意的是，返回 json 需要一些时间(几秒到几分钟，具体取决于矿工):
{ blockHash: '0xcd08039bac40e2865886e8f707ce9b901978c339d3abb81516787b0357f53fbd',区块编号:4611028，...其他数据...交易哈希:'0x12c65523743ed169c764553ed2e0fb2af1710bb20a41b390276ffc2d5923c6a9'，交易索引:1 }
这是我用来制作 axios.post 和设置状态的代码:
从react"导入React；从react-paypal-express-checkout"导入 PaypalExpressBtn；从axios"导入 axios；导出默认类 Pay 扩展 React.Component {构造函数(道具){超级(道具)；this.state = {项目: {}};}使成为() {const onSuccess = 付款 =>{公理.post("http://compute.amazonaws.com:3000/", {价值:this.props.value，文件名:this.props.fileName,哈希:this.props.hash}).then(response => console.log(response.data)).catch(函数(错误){控制台日志(错误)；});控制台日志(付款)；};让 env = "沙箱";//您可以在此处设置为 'production' 进行生产让货币=美元"；//或者你可以从你的道具或状态设置这个值让总数 = 3.33;//同上，这是总金额(基于常量客户端 = {沙盒:...钥匙..."，生产:您的生产应用程序ID"};返回 (<div><PaypalExpressBtnonSuccess={onSuccess}/>
);}}
当我 console.log({ items: this.state.items}) 我返回一个看似无穷无尽的构造函数和道具数组.
我试过了
this.setState({ items : items.transactionHash }); 和 console.log({ items: this.state.items.transactionHash})，都没有效果.
我需要做的是 set.state 只包含来自上述 json 的 transactionHash 而没有别的.
非常感谢！
解决方案
需要找出transactionHash在json对象中的位置.
要找出结构，首先记录输出并检查控制台.
console.log(res.data)
如果让我们假设它在数据对象下，例如:
"数据:{"transactionHash": "0x12c65523743ed169c764553ed2e0fb2af1710bb20a41b390276ffc2d5923c6a9"}
这是您设置状态的方式:
axios.post("http://compute.amazonaws.com:3000/users",{价值:this.props.value，文件名:this.props.fileName,哈希:this.props.hash}).then(res => {控制台日志(res.data)this.setState({ hash: res.data.transactionHash });});
完成后的状态将是:
{项目: {}，哈希:0x12c65523743ed169c764553ed2e0fb2af1710bb20a41b390276ffc2d5923c6a9"}你当然可以使用解构，但首先我们需要知道从服务器返回的数据的形状
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!
解决方案
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
这篇关于如何使用返回的 json 对象中的特定项目设置反应组件的状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
