Django api endpoint работает в postman, но возвращает неопределенное значение во фронт-энде после вызова axios get

У меня есть следующие 2 проекта по анализу финансовых данных:

https://github.com/codyc4321/dividends_ui

https://github.com/codyc4321/stocks_backend

У меня есть конечная точка типа такой

from django.shortcuts import render
from django.http import HttpResponse
from django.core import serializers

import datetime, json, yfinance

def get_current_price(yahoo_obj):
    info = yahoo_obj.get_info()
    price = info['currentPrice']
    return price


def get_all_dividends(yahoo_obj):
    panda_dividends_obj = yahoo_obj.dividends
    dividends_dicts = []
    for i, v in panda_dividends_obj.iteritems():
        dividends_dicts.append({'date': i.to_pydatetime().date(), 'amount': v})
    return dividends_dicts

def get_current_dividend_yield(price, dividends):
    """ this doesnt need any dates because current assumes were checking the rate over this past year"""
    rate = get_yearly_dividend_rate_from_date(dividends, datetime.date.today())
    return round((rate / price) * 100, 2)


def current_dividend_yield_view(request, ticker):
    yahoo_stock_obj = yfinance.Ticker(ticker.upper())
    price = get_current_price(yahoo_stock_obj)
    dividends = get_all_dividends(yahoo_stock_obj)
    current_yield = get_current_dividend_yield(price, dividends)
    current_yield_object = {'current_yield': current_yield}
    data = json.dumps(current_yield_object)
    return HttpResponse(data, content_type='application/json')

и path('current_yield/<str:ticker>/', views.current_dividend_yield_view, name='current_yield'),

согласно postman и моему браузеру конечная точка работает как положено

мой app.js передает обратный вызов компоненту SearchBar

import React from 'react';

import SearchBar from './SearchBar';

import axios from 'axios';


class App extends React.Component {

  state = {data: null}

  onSearchSubmit = async (term) => {
    const url = 'http://localhost:8000/dividends/current_yield/' + term
    console.log(url)
    const response = await axios.get(url, {
      params: {query: term},
      headers: {
        // Authorization: 'Client-ID *YOUR KEY HERE*'
        // "Access-Control-Allow-Origin": "*",
      }
    });

    console.log("response data results:")
    console.log(response.data.results);
    this.setState({data: response.data.results});
  }

  render() {
    return (
      <div className="ui container" style={{marginTop: '10px'}}>
        <SearchBar onSubmit={this.onSearchSubmit} />
      </div>
    )
  }
}


export default App;

searchBar.js

import React from 'react';


class SearchBar extends React.Component {
  state = {term: 'lexus'}

  // onFormSubmit(event) {
  //   event.preventDefault();
  //   console.log(this.state.term);
  // }

  onFormSubmit = (event) => {
    event.preventDefault();
    // console.log(this.state.term);
    this.props.onSubmit(this.state.term)
  }

  render() {
    return (
      <div className="ui segment">
        <form onSubmit={this.onFormSubmit} className="ui form">
          <div className="field">
            <label>Image search</label>
            <input
             type="text"
             value={this.state.term}
             onChange={(e) => this.setState({term: e.target.value})} />
          </div>
        </form>
      </div>
    );
  };
};

export default SearchBar;

но вызов axios ничего не возвращает:

Я хотел бы иметь возможность console.log выводить {"current_yield": 2.38}. Любая помощь приветствуется

Вернуться на верх