javascript - 用 axios 对象制作组件
问题描述
我做了这个简单的例子,我用 Axios 接收了一个带有内部对象的对象。我的问题是我可以使用什么方法来创建每个 Axios 结果的不同组件,然后独立渲染。因为我想在我的 webapp 的不同地方使用它们。
class apitest extends Component {
constructor(props) {
super(props);
this.state = {
btcticker: {},
ethticker: {},
trxticker: {},
xrpticker: {},
eosticker: {},
bchticker: {}
};
}
componentDidMount() {
axios
.get(
"https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,XRP,BCH,EOS,TRX&tsyms=EUR,CHANGE&api_key=xxx"
)
.then(res => {
const BTCEUR = res.data.BTC;
const ETHEUR = res.data.ETH;
const BCHEUR = res.data.BCH;
const EOSEUR = res.data.EOS;
const TRXEUR = res.data.TRX;
const XRPEUR = res.data.XRP;
console.log(BTCEUR);
console.log(ETHEUR);
console.log(BCHEUR);
console.log(EOSEUR);
console.log(TRXEUR);
console.log(XRPEUR);
this.setState({ btcticker: BTCEUR });
this.setState({ ethticker: ETHEUR });
this.setState({ bchticker: BCHEUR });
this.setState({ eosticker: EOSEUR });
this.setState({ trxticker: TRXEUR });
this.setState({ xrpticker: XRPEUR });
});
}
render() {
return (
<div className="test">
{Object.keys(this.state.btcticker).map(key => (
<div id="crypto-container">
<span className="left">{key}</span>
<span className="right">
<NumberFormat
value={this.state.btcticker.EUR}
displayType={"text"}
decimalPrecision={2}
thousandSeparator={true}
prefix={"€"}
/>
</span>
</div>
))}
</div>
);
}
}
export default apitest;
解决方案
您应该在进行调用的地方将此组件设置为其他组件的父级。然后将其视图所需的部分数据传递给每个组件。或者,您可以使用 Redux with redux saga 之类的东西来创建一个全局存储,您可以在其中保存缓存数据,然后将每个组件连接到存储,以便它可以获取所需的数据。
推荐阅读
- python - 如何选择具有多个条件的行并计算原始数据框中的新列
- json - VBA post 方法请求正文(“MSXML2.XMLHTTP”):解析 JSON 时出错:^ 期望 '{' 或 '['
- r - 日期时间对象到分钟:我需要 3 个包
- for-loop - 表单中的 Google 应用程序脚本。每周逐步隐藏行
- android - 如何将 Kindle 帐户中的笔记和亮点同步到 iOS / Android 应用程序 - 类似于 ReadWise 所做的
- java - 在 recyclerview 中单击上述单选按钮后,将启用多个单选按钮
- javascript - 我怎样才能让这个视频流畅地滚动?
- java-16 - 我安装了 NetBeans 12.4。我有 JDK 16.0.2。但是在安装netbeans之后,它并没有启动。我在 nb 文件夹 hs_err_pid10436 中找到了这个文件
- python - Doc2Vec 模型中 tqdm 函数的问题
- python - 从 Python 中的 URL 解析图像