如何解决太阳能数据-将js与API集成
我正在尝试与API集成，该API仅提供给定输出数据示例（在json和xml中）。
以下是API准则：https://developer.nrel.gov/docs/solar/solar-resource-v1/#request-parameters
这是我的代码
import * as Yup from 'yup';
import { Form,Input,Scope } from '@rocketseat/unform';
import axios from 'axios';
import { ToastContainer,toast } from 'react-toastify';
import { Component } from 'react';
import 'react-toastify/dist/ReactToastify.css';
import { Container } from '../styles';
import React from 'react';
const schema = Yup.object().shape({
avg_dni: Yup.object().shape({
monthly: {
jan: Yup.string().required('São necessários dados de todos os meses'),fev: Yup.string().required('São necessários dados de todos os meses'),mar: Yup.string().required('São necessários dados de todos os meses'),abr: Yup.string().required('São necessários dados de todos os meses'),mai: Yup.string().required('São necessários dados de todos os meses'),jun: Yup.string().required('São necessários dados de todos os meses'),jul: Yup.string().required('São necessários dados de todos os meses'),ago: Yup.string().required('São necessários dados de todos os meses'),set: Yup.string().required('São necessários dados de todos os meses'),out: Yup.string().required('São necessários dados de todos os meses'),nov: Yup.string().required('São necessários dados de todos os meses'),dez: Yup.string().required('São necessários dados de todos os meses'),},city: Yup.string().required('Cidade é obrigatório'),state: Yup.string().required('UF é obrigatório'),}),});
export default class Solar extends Component {
state = {
initialData: {},};
async componentDidMount() {
const res = await api.get(`https://developer.nrel.gov//api/solar/solar_resource/v1`);
this.setState({ initialData: res.data });
}
render() {
const { initialData } = this.state;
const handleSubmit = async (data) => {
try {
await api.put('v1.json',data);
await api.post('v1.json',data);
toast.success('Informações do cliente captadas!');
} catch (err) {
toast.error('Erro ao persistir os dados.');
console.error(err);
}
};
const findSun = async (city,state) => {
const res = await axios.get(`https://https://developer.nrel.gov/api/solar/solar_resource/v1.json?api_key=fhjEdikZ0zVecWZ2OgcUrNtp5dyTLIbqUBatshvK&city=${city}&state=${state}`);
document.getElementById('avg_dni.monthly.jan').value = res.data.jan;
document.getElementById('avg_dni.monthly.fev').value = res.data.fev;
document.getElementById('avg_dni.monthly.mar').value = res.data.mar;
document.getElementById('avg_dni.monthly.abr').value = res.data.abr
document.getElementById('avg_dni.monthly.mai').value = res.data.mai;
document.getElementById('avg_dni.monthly.jun').value = res.data.jun;
document.getElementById('avg_dni.monthly.jul').value = res.data.jul;
document.getElementById('avg_dni.monthly.ago').value = res.data.ago;
document.getElementById('avg_dni.monthly.set').value = res.data.set;
document.getElementById('avg_dni.monthly.out').value = res.data.out;
document.getElementById('avg_dni.monthly.nov').value = res.data.nov;
document.getElementById('avg_dni.monthly.dez').value = res.data.dez;
};
return (
<Container>
<Form schema={schema} initialData={initialData} onSubmit={handleSubmit}>
<Scope path="avg_dni.monthly">
<section>
<div>
<label htmlFor="avg_dni.monthly.jan">Janeiro</label>
<Input name="jan" id="jan" onBlur={evt => findSun(evt.target.value)} disabled />
</div>
<div>
<label htmlFor="avg_dni.monthly.fev">Fevereiro</label>
<Input name="fev" id="fev" onBlur={evt => findSun(evt.target.value)} disabled />
</div>
<div>
<label htmlFor="avg_dni.monthly.mar">Março</label>
<Input name="mar" id="mar" onBlur={evt => findSun(evt.target.value)} disabled />
</div>
<div>
<label htmlFor="avg_dni.monthly.abr">Abril</label>
<Input name="abr" id="abr"onBlur={evt => findSun(evt.target.value)} disabled />
</div>
</section>
<section>
<div>
<label htmlFor="avg_dni.monthly.mai">Maio</label>
<Input name="mai" id="mai" onBlur={evt => findSun(evt.target.value)} disabled/>
</div>
<div>
<label htmlFor="avg_dni.monthly.jun">Junho</label>
<Input name="jun" id="jun" onBlur={evt => findSun(evt.target.value)} disabled />
</div>
<div>
<label htmlFor="avg_dni.monthly.jul">Julho</label>
<Input name="jul" id="jul" onBlur={evt => findSun(evt.target.value)} disabled />
</div>
<div>
<label htmlFor="avg_dni.monthly.ago">Agosto</label>
<Input name="ago" id="ago" onBlur={evt => findSun(evt.target.value)} disabled/>
</div>
</section>
<section>
<div>
<label htmlFor="avg_dni.monthly.set">Setembro</label>
<Input name="set" id="set" onBlur={evt => findSun(evt.target.value)} disabled />
</div>
<div>
<label htmlFor="avg_dni.monthly.out">Outubro</label>
<Input name="out" id="out" onBlur={evt => findSun(evt.target.value)} disabled />
</div>
<div>
<label htmlFor="avg_dni.monthly.nov">Novembro</label>
<Input name="nov" id="nov" onBlur={evt => findSun(evt.target.value)} disabled />
</div>
<div>
<label htmlFor="avg_dni.monthly.dez">Dezembro</label>
<Input name="dez" id="dez" onBlur={evt => findSun(evt.target.value)} disabled />
</div>
</section>
</Scope>
</Form>
</Container>
)
}
}
这是我收到的错误
×
未处理的拒绝（TypeError）：_services_api__WEBPACK_IMPORTED_MODULE_0 ___ default.a.get不是函数
Solar.componentDidMount
C：/Users/Daniel/lnw/web/src/components/CalcForm/pages/Irradiaton/index.js：41
38 |
39 |
40 |异步componentDidMount（）{
41 | const res =等待api.get（
/api/solar/solar_resource/v1）; | ^ 42 | this.setState（{initialData：res.data}）; 43 | } 44 |
我创建了v1.json文件
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。