javascript - 显示来自动作和减速器的数据的问题 - 反应原生 redux

Question

我几乎完成了我的应用程序，但此时我的动作和减速器有问题。所以我的应用程序允许检查货币及其价格。当我从 Picker 组件中选择一个项目时，价格不会改变。这是所有时间默认的 EUR -> PLN。这是使用示例

首先，用户可以写入 EUR 的价格，然后将其转换为 PLN -> 结果可以使用此配置。但是，如果我将配置更改为 USD -> PLN 价格不会改变:(。

另一个问题是当我选择两个选择器的值“EUR”时，我有 NaN

'1 EUR 等于 NaN EUR'

我还注意到，当我更改底部选择器项目时，价格会转换。所以要清楚：如果是

欧元 -> PLN = 好的

USD -> PLN = 先前配置的价格（无论是什么）

美元 -> 全部 = 有效

所以我认为上面的 Picker 组件肯定有问题。这是我用来处理这个问题的代码。

动作.js

export const handleFirstSelect = itemValue => {
  return {
    type: actionTypes.HANDLE_FIRST_SELECT,
    itemValue: itemValue,
  };
};

减速器.js

import React from 'react';
import * as actionTypes from '../actions/actionTypes';

const initialState = {
  currencies: ['USD', 'AUD', 'SGD', 'PHP', 'EUR', 'PLN', 'GBP'],
  base: 'EUR',
  amount: '',
  convertTo: 'PLN',
  result: '',
  date: '',
  error: null,
  loading: false,
};

const exchangeCurrencies = (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.HANDLE_FIRST_SELECT:
      return {
        ...state,
        base: action.itemValue,
      };
    case actionTypes.HANDLE_SECOND_SELECT:
      return {
        ...state,
        convertTo: action.itemValue,
      };
    case actionTypes.HANDLE_INPUT:
      return {
        ...state,
        amount: action.text,
        date: state.date,
      };
    case actionTypes.HANDLE_SWAP:
      return {
        ...state,
        convertTo: state.base,
        base: state.convertTo,
        e: action.e,
      };
    case actionTypes.FETCH_DATA_BEGIN:
      return {
        ...state,
        loading: true,
        error: null,
      };
    case actionTypes.FETCH_DATA_SUCCESS:
      return {
        ...state,
        result: action.data.rates,
        date: action.data.date,
      };
    case actionTypes.FETCH_DATA_FAIL:
      return {
        ...state,
        loading: false,
        error: action.error,
      };
    default:
      return state;
  }
};

export default exchangeCurrencies;

有人知道我在做什么错吗？谢谢所有的答案。当然，如果需要，我可以添加更多代码。

编辑：还添加了组件代码

class HomeContentContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      base: 'EUR',
      amount: '',
      convertTo: 'PLN',
      result: '',
      date: '',
    };
  }

  componentDidMount() {
    if (this.props.amount === isNaN) {
      return;
    } else {
      try {
        this.props.fetchData();
      } catch (e) {
        console.log('error', e);
      }
    }
  }

  render() {
    return (
      <ImageBackground
        style={styles.imageBackground}
        source={require('../../assets/images/2.jpeg')}>
        <View style={styles.container}>
          <View style={styles.inputsContainer}>
            <TextInputComponent
              value={this.props.amount}
              onChangeText={this.props.handleInput}
            />
            <PickerComponent
              selectedValue={this.props.base}
              onValueChange={this.props.handleFirstSelect}
            />
          </View>
          <View style={styles.inputsContainer}>
            <TextInputComponent
              editable={false}
              value={`${
                this.props.amount === ''
                  ? '0'
                  : this.props.result === null
                  ? 'Calculating...'
                  : this.props.result
              }`}
            />
            <PickerComponent
              selectedValue={this.props.convertTo}
              onValueChange={this.props.handleSecondSelect}
            />
          </View>
        </View>
        <ResultText
          equevalentText={`${this.props.amount} ${
            this.props.base
          } is equevalent to `}
          amountText={`${
            this.props.amount === ''
              ? '0'
              : this.props.result === null
              ? 'Calculating...'
              : this.props.result
          }${' '}${this.props.convertTo}`}
          dateText={`As of ${
            this.props.amount === ''
              ? ''
              : this.props.date === null
              ? ''
              : this.props.date
          }`}
        />
        <CustomButton onClick={this.props.handleSwap} buttonTitle="SWAP" />
        <BottomSignature />
      </ImageBackground>
    );
  }
}

const mapStateToProps = state => {
  return {
    base: state.base,
    amount: state.amount,
    convertTo: state.convertTo,
    result: (state.result[state.convertTo] * state.amount).toFixed(2),
    date: state.date,
  };
};

const mapDispatchToProps = dispatch => {
  return {
    handleFirstSelect: itemValue => dispatch(exchangeCurriencesActions.handleFirstSelect(itemValue)),
    handleSecondSelect: itemValue => dispatch(exchangeCurriencesActions.handleSecondSelect(itemValue)),
    handleInput: text => dispatch(exchangeCurriencesActions.handleInput(text)),
    fetchData: () => dispatch(exchangeCurriencesActions.fetchData()),
    handleSwap: e => dispatch(exchangeCurriencesActions.handleSwap(e)),
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(HomeContentContainer);

标签： javascriptreact-nativereduxreact-redux