React- приложение с использованием API. Почему я не могу получить свои данные, когда обновляю страницу с подробностями? - PullRequest
Новая
       34

React- приложение с использованием API. Почему я не могу получить свои данные, когда обновляю страницу с подробностями?

0 голосов
/ 06 мая 2018 
import React,{Component} from 'react';
import {Link} from 'react-router-dom';
import {fetchCoin} from '../actions';
import { connect } from "react-redux"; 
import CoinIcon from './coinIcon'; 
import Timestamp from 'react-timestamp';
import CoinGraph from './coinGraph';
import '../index.css';
class CoinDetail extends Component{
componentDidMount(){
const { id } = this.props.match.params;
this.props.fetchCoin(id);
console.log('id :' +id);
setInterval(() => {
  this.props.fetchCoin(id);
  console.log("data Update");

}, 500000);

}

render(){
const color =(i) => ({color: (i > 0 ? 'green' : 'red')});
// const { id } = this.props.match.params;
const {coins} = this.props;

if (!coins){
  return( 
    <div>
      <p>no coin</p>
      <Link to="/" className="btn btn-primary back">Go Back</Link>
    </div>
  );}
return(

  <div className="content">


    <CoinIcon coinSymbol={coins.symbol} />
    <h3>{coins.name}</h3>

    <p>Symbol: {coins.symbol}</p>
    <p>Price USD: {coins.price_usd}</p>
    <p style={color(coins.percent_change_1h)}>Price Change (1H): {coins.percent_change_1h}%</p>
    <p style={color(coins.percent_change_24h)}>Price Change (1D): {coins.percent_change_24h}%</p>
    <p style={color(coins.percent_change_7d)}>Price Change (1W): {coins.percent_change_7d}%</p>
    <p>Total Supply: {coins.total_supply}</p>
    <p>24 Hour Volume: {coins['24h_volume_usd']}</p>
    <p>Market Cap: {coins.market_cap_usd}</p>
    <p>Available Supply: {coins.available_supply}</p>
    <p>Last Updated : <Timestamp time={coins.last_updated} format='full' /></p>
    <br/>
    <br/>
    <Link to="/" className="btn btn-primary back">Go Back</Link>
    <CoinGraph id={coins.id}/>
    </div>    
  );
 }
}

function mapStateToProps({ coin }, ownProps) {
return { coins: coin[ownProps.match.params.id] };
}

export default connect(mapStateToProps, { fetchCoin }) (CoinDetail);

Это моя подробная страница. 

    case `${FETCH__COIN}_FULFILLED`:
      console.log('action.payload.data.id:'+action.payload.data);
      return { ...state, [action.payload.data.id]: action.payload.data};
     default:
      return state;
  }
  }

Это код reducer.js. 

export function fetchCoin(id) {
  const request = axios.get(`${ROOT_URL}/${id}/`);

  return{
    type: FETCH__COIN,
    payload: request
  };
}

Это код действия / index.js.

Почему я не могу получить свои данные, когда обновляю страницу с подробностями? Пожалуйста, дайте мне помощь. Я буду ждать вашего ответа. Спасибо!

Также, пожалуйста, поймите, что интервал неправильный. Это произошло в процессе переноса на сайт переполнения стека.

1 Ответ

0 голосов
/ 06 мая 2018

Я решил проблему. это было только потому, что я не добавил "this.props.fetchCoins ();" на странице сведений

...