Question

我在数据库中有两个示例，其状态如下：

state:
  interaction: [
    {creatorId: 123,
     title: exampleTitle1
    },
    {creatorId: 1234,
     title: exampleTitle2}
  ]

商店是这里：

const store = createStore(
  combineReducers({
    ...(other reducers)
    interaction: interactionReducer
  }),
  applyMiddleware(thunk)
);

我从componentDidMount的API获取基础：

componentDidMount() {
  this.props.dispatch(fetchBases());
}

使用此动作创建者：

export const BASE_SUCCESS = "BASE_SUCCESS";
export const baseSuccess = bases => ({
    type: BASE_SUCCESS,
    bases,
});

和操作（当我在控制台日志action上返回数组时就可以了）：

export const fetchBases = () => dispatch => {
  fetch(`${API_BASE_URL}/base/list`, {
    method: "GET",
  })
  .then(res => {
    if (!res.ok) {
      return Promise.reject(res.statusText);
    }
    return res.json();
  })
  .then(bases => dispatch(baseSuccess(bases)))
  .catch(error => {
    console.log("GET request failed", error);
  });
};

减速器：

export default function interactionReducer(state = initialState, action) {
    if (action.type === BASE_SUCCESS) {
      return Object.assign({}, state, {
        bases: action.bases,
      });
    }
    return state;
}

在组件中，我具有以下内容：

const mapStateToProps = state => ({
    bases: state.bases,
});

export default requiresLogin()(connect(mapStateToProps)(DashContent));

当我在组件中管理日志this.state时，我得到了日志null。我想不出要挽救生命的原因，为什么它没有正确填充数据。之前它仅显示数组中的一项，但现在为空

Answer 1

您应该这样打开状态：

const mapStateToProps = state => ({
    bases: state.interaction.bases,
});

因为您在全局状态下有一个interaction状态。另外，您无法看到this.state的任何状态，因为它指向应用程序的本地状态。您可以将props设为this.props.bases来达到自己的状态。

Redux：状态不会显示数组

1 个答案: