Question

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
  };
}

这是action / index.js代码。

为什么在刷新详细信息页面时无法获取数据？请帮我。我会等你的回答。谢谢！

另外，请理解间距不正确。它刚刚发生在转移到堆栈溢出站点的过程中。

Answer 1

我解决了这个问题。这只是因为我没有添加“this.props.fetchCoins（）;”在详细信息页面

使用api的React-redux应用程序。当我刷新详细信息页面时，为什么我无法获取数据？

1 个答案: