太阳能数据-将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 (将#修改为@）