Question

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

我的动作创作者

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

Answer 1

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

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

Answer 2

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

Answer 3

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

\s+(?=\S+\s*$)

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

3 个答案: