时间戳

首页 > 解决方案 > Redux 获取返回空的有效负载数组

react-native - Redux 获取返回空的有效负载数组

问题描述

我正在尝试从 API 获取数据（现在，我只有一个用于测试的数组）并将其显示在我的屏幕上。

我创建一个动作文件：

import {
  GET_TENANT_DATA
} from './Types';

export const getTenants = ({ userID }) => {
  return (dispatch) => {
    const test = ['Saab', 'Volvo', 'BMW']; // Later it will be changed for axios fetch
    dispatch({
      type: GET_TENANT_DATA,
      payload: test
    });
  };
};

我的减速机：

import {
  GET_TENANT_DATA
} from '../actions/Types';

const INITIAL_STATE = {
  error: false,
  data: []
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case GET_TENANT_DATA:
      return { ...state, error: false, tenants: action.payload };
    default:
      return state;
  }
};

然后，在我的屏幕中，我通过 console.log 对其进行测试：

...
componentDidMount() {
    AsyncStorage.getItem('userID')
      .then((value) => {
        const userId = JSON.parse(value);
        this.props.getTenants(userId);
      });
  }

  render() {
    console.log(this.props.data);
...

但是，日志显示一个空数组而不是 ['Saab', 'Volvo', 'BMW']。有谁知道为什么会这样？

谢谢

标签： react-nativeredux

解决方案

您不是data在减速器中设置属性，而是设置tenants属性并data保持最初设置的状态 - 为空。

像这样改变你的减速器：

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case GET_TENANT_DATA:
      return { ...state, error: false, data: action.payload };
    default:
      return state;
  }
};

推荐阅读