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

Posted 2023-02-22

【中文标题】React 应用程序转换为 react-native - react-redux 和 react-thunk 的问题

【英文标题】：React app converted to react-native - problem with react-redux and 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 或没有属性映射其他东西，否则执行您的功能。

【参考方案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 是不同的东西，这让我感到困惑，但这只是我对命名的看法。