如何从 redux 存储中获取数据并在 React Native 中的组件中使用它答案

【问题标题】：How to get data from the redux store and use it in component in React Native如何从 redux 存储中获取数据并在 React Native 中的组件中使用它
【发布时间】：2020-04-10 22:52:34
【问题描述】：

我用 react native 设置了 Redux。我设法以 res.data 的形式从动作创建者的后端获得响应。但是每当我在我的组件中使用它时，它总是被评估为未定义或为空。

我的动作创建者

export const getData = () => (dispatch: any) => {
  axios
    .get(`${API_URL}/api/request`)
    .then((res) => {
      dispatch({
        type: REQUESTS_FETCHED,
        requestData: res.data,
      });
      console.log(res.data);
    })
    .catch((err) => {
      console.error(err);
    });
};

还有我的减速器

const request = (state = initialState, action: any) => {
  switch (action.type) {
    case REQUESTS_FETCHED:
      return {
        ...state,
        requestData: action.requestData,
      };
    default:
      return state;
  }
};

组件如下

class Request extends Component {
  componentDidMount = () => {
    const {getData} = this.props;
    getData();
  };
  render() {
    const {requestData}: any = this.props;
    return (
      <View style={styles.container}>
        {requestData &&
          requestData.map((data: any) => {
              <Text>{data.value}</Text> 
          })}
      </View>
    );
  }
}

const mapStateToProps = (state: any) => ({
  requestData: state.request.requestdata,
});
const mapDispatchToProps = {
  getData,
};

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

注意，这与我在 reactjs 中使用的代码相同。谢谢！

【问题讨论】：

标签： reactjs react-native redux react-redux

【解决方案1】：

您需要返回该文本元素。只需删除渲染方法中的大括号（箭头函数将直接以这种方式返回值），即

  render() {
    const {requestData}: any = this.props;
    return (
      <View style={styles.container}>
        {requestData && requestData.map((data: any) => <Text>{data.value}</Text>)}
      </View>
    );
  }

【讨论】：

【解决方案2】：

您可能在mapStateToProps 中有错字，应该是state.request.requestData

【讨论】：

【解决方案3】：

我看到的唯一错误是您的 mapStateToProps。应该是这样的：

const mapStateToProps = (state: any) => ({
    requestData: state.requestdata,
});

【讨论】：