时间戳

首页 > 解决方案 > 如何从 redux 存储中获取数据并在 React Native 中的组件中使用它

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

问题描述

我用 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 中使用的相同代码。谢谢！

标签： reactjsreact-nativereduxreact-redux

解决方案

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

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

推荐阅读