在react-redux应用程序中动态输出数据问题

时间:2018-04-12 14:25:25

标签: javascript reactjs react-redux

我有一份工作的考试作业。 我的工作是创建一个应该显示所选货币的加密货币应用程序。 当我想显示所选货币的数据时,我遇到了问题,我的数据“currency.price”不是我选择的。 我为我糟糕的英语道歉

这是我的组件

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    if( requestCode== REQUEST_IMAGE_CAPTURE) {
        try {
            if (requestCode == REQUEST_IMAGE_CAPTURE && resultCode == RESULT_OK) {
                Bundle extras = data.getExtras();
                Bitmap imageBitmap = (Bitmap) extras.get("data");
                iv.setImageBitmap(imageBitmap);
                image = encode(imageBitmap);//this line is added to encode
            }
        }

        catch (Exception e){ Toast.makeText(DoReport.this, e.toString(), Toast.LENGTH_LONG).show();}
    }
    else if (requestCode == PHOTO_FROM_MEMORY_REQUESTED && resultCode == RESULT_OK) {
        updateSelectedPicture(data.getData());
    }
}

这是我的行动

import React, { Component } from 'react';
import {Link} from 'react-router-dom';
import {connect } from 'react-redux';
import {fetchCurrency} from "../actions/fetchCurrencies";
import '../App.css';
 class Settings extends Component {
  constructor(){
  super();
  this.handleCurrency = this.handleCurrency.bind(this)
 }
 handleCurrency(e) {
  this.props.fetchCurrency(e.target.name, e.target.value);
 }
 render(){
  return(
  <div className='App container'>
  <select className="custom-select"
  onChange={this.handleCurrency}>
  <option value='selected'>SELECT CURRENCY</option>
  <option value='EUR'>EUR</option>
  <option value='AUD'>AUD</option>
  <option value='GBP'>GBP</option>
  <option value='CAD'>CAD</option>
  <option value='JPY'>JPY</option>
  </select>
  <table className="table">
   <thead>
    <tr>
    <th scope="col">Rank</th>
    <th scope="col">Name</th>
    <th scope="col">Symbol</th>
    <th scope="col">Price</th>
    <th scope="col">1 hour change</th>
    <th scope="col">24 hour change</th>
    <th scope="col">7 days change</th>
    <th><Link scope="col" to='/'>Home</Link></th>
    </tr>
    </thead>
    <tbody>{this.props.currencies.map((currency,value) => {
    return (
    <tr key={currency.id}>
    <td>{currency.rank}</td>
    <td>{currency.name}</td>
    <td>{currency.symbol}</td>
    <td>{currency[`price_${value}`]}</td>
    <td>{currency.percent_change_1h}</td>
    <td>{currency.percent_change_24h}</td>
    <td>{currency.percent_change_7d}</td>
    </tr>
    )
    })}
    </tbody>
    </table>
    </div>
      )
     }
  }
 function mapStateToProps(state){
 console.log(state)
 return {
 currencies : state.currencies
 }
}
export default connect (mapStateToProps,{fetchCurrency})(Settings);

这是我的减速机

const CURRENCY = 'https://api.coinmarketcap.com/v1/ticker/'
export const  fetchCurrency = (name, value) => dispatch => {
fetch (`${CURRENCY}${name}/?convert=${value}`)
 .then(res => res.json())
 .then (currency => dispatch ({
  type: 'FETCH_CURRENCY',
  payload: currency
 }))
 }

0 个答案:

没有答案