React 应用程序转换为 react-native - react-redux 和 react-thunk 的问题答案

【问题标题】：React app converted to react-native - problem with react-redux and react-thunkReact 应用程序转换为 react-native - react-redux 和 react-thunk 的问题
【发布时间】：2020-06-19 09:53:22
【问题描述】：

我转换了这个应用程序 https://codesandbox.io/s/3y77o7vnkp<--Please check this link 进入我的 react-native 应用程序，它运行完美。由于我实现了 redux 和 redux-thunk，我在获取数据时遇到了问题。

有问题。我将正常函数从这个上层链接转换为 react-native 中的动作和减速器。例如

handleSelect = itemValue => {
    this.setState(
      {
        ...this.state,
        base: itemValue,
        result: null,
      },
      this.calculate
    );
  };

到 actiontypes.js

export const HANDLE_FIRST_SELECT = 'HANDLE_FIRST_SELECT';

action.js

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

和reducer.js

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,
        result: null,
      };
...

下一步我像这样在我的组件中使用了 mapStateToProps 和 mapDispatchToProps

const mapDispatchToProps = dispatch => {
  return {
    handleFirstSelect: itemValue =>
      dispatch(exchangeCurriencesActions.handleFirstSelect(itemValue)),
...

const mapStateToProps = (state) => {
  return {
    base: state.base,
    amount: state.amount,
    convertTo: state.convertTo,
    result: state.result,
    date: state.date,
  };
};

我现在正在使用 this.props

<PickerComponent
    selectedValue={this.props.base}
    onValueChange={this.props.handleFirstSelect}
/>

在那之前，一切正常。现在，当我使用 react-redux 和 redux-thunk (action.js) 以这种方式下载数据时，它会停止工作

export const fetchDataSuccess = data => {
  return {
    type: actionTypes.FETCH_DATA_SUCCESS,
    data: data,
  };
};

export const fetchDataFail = error => {
  return {
    type: actionTypes.FETCH_DATA_FAIL,
    error: error,
  };
};

export const fetchData = () => {
  return dispatch => {
    fetch(`https://api.exchangeratesapi.io/latest?base=${this.props.base}`)
      .then(res => res.json())
      .then(
        data => dispatch(fetchDataSuccess(data.rates)),
        e => dispatch(fetchDataFail(e)),
      );
  };
};

下一个 reducer.js

...
case actionTypes.FETCH_DATA_BEGIN:
      return {
        ...state,
        loading: true,
        error: null,
      };
    case actionTypes.FETCH_DATA_SUCCESS:
      console.log('data', action.data);
      return {
        ...state,
        date: action.data.date,
        result: action.data.rates,
        loading: false,
      };
    case actionTypes.FETCH_DATA_FAIL:
      console.log('data', action.error);
      return {
        ...state,
        loading: false,
        error: action.error,
      };
...

在下一步中，将函数 fetchData 添加到 mapDispatchToProps 并像这样在 componentDidMount 中调用它

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

最后我在 mapStateToProps 中添加了货币计算。我这样改变结果 result: (state.result[state.convertTo] * state.amount).toFixed(4),

我还在商店中添加了应用中间件。

最后出现错误

import React from 'react';
import HomeContentContainer from '../../containers/HomeContentContainer/HomeContentContainer';

class HomeScreen extends React.Component {
  render() {
    return <HomeContentContainer />;
  }
}

export default HomeScreen;

有人知道如何解决这个问题吗？我应该在哪里更改代码？

【问题讨论】：

我不能肯定地说，因为错误行 (at HomeScreen.js line 6) 实际上不在您发布的代码中，但它肯定与 result: (state.result[state.convertTo] * state.amount).toFixed(4), 有关。您正在尝试访问 state.result 上的属性，该属性在映射状态中初始化为字符串 ...result: '', 到道具。
我将 HomeScreen.js 添加到我的帖子中
我会说您从 API 返回的最有可能的 data.rates 没有设置......
请注意，我检查了 API 调用，它确实返回了一个带有费率的对象...
哦，你知道发生了什么。当您在数据返回之前发出请求时，正在调用 props 的映射状态，因此在设置结果之前就发生了错误！添加一些代码来检查设置的结果，如果为 null 或没有属性映射其他东西，否则执行您的功能。

标签： javascript react-native redux react-redux redux-thunk

【解决方案1】：

跟进问题的 cmets，请查看这些...

在mapStateToProps 中保护您对state.result 的访问权限，可能像这样：

result: state.result ? (state.result[state.convertTo] * state.amount).toFixed(4) : null

，其中null 也可以是0 或其他，您的电话。在 API 请求完成之前，您的 mapStateToProps 确实（至少）被调用了一次，因此它需要处理您的初始状态 state.result。

组件属性result 和state.result 是不同的东西，这让我感到困惑，但这只是我对命名的看法。

【讨论】：