使用react-redux和react-thunk将React应用程序转换为react-native - problem

Question

我将此应用程序https://codesandbox.io/s/3y77o7vnkp <--Please check this link转换为我的react原生应用程序，它工作得很完美。因为我实现了redux和redux-thunk，所以我在获取数据时遇到了问题。

这是一个问题。我将正常函数从上面的链接转换为react-native中的actions和reducers。例如

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),

此外，我还将applymiddleware添加到商店中。

最后出现了一个错误

​

​

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

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

export default HomeScreen;

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

Answer 1

跟进对问题的评论，请务必查看这些评论...

在mapStateToProps中保护您对state.result的访问，可能如下所示：

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

，其中null也可以是0或其他什么，由您决定。在mapStateToProps请求完成之前，您的API确实会被调用(至少)一次，因此它需要处理state.result的初始状态。

我发现组件属性result和state.result是不同的东西，这很令人困惑，但这只是我对命名的看法。