数据未传递到 React Redux 中的组件答案

【问题标题】：Data is not passing to component in React Redux数据未传递到 React Redux 中的组件
【发布时间】：2020-12-17 09:07:31
【问题描述】：

我在一个 React Redux 项目中工作。

我的 Reducer 如下所示

statusReducer.js

import { FETCH_STATUS } from "../firebase/types";

export default (state = false, action) => {
  switch (action.type) {
    case FETCH_STATUS:
      return action.payload || null;
    default:
      return state;
  }
};

我的调度员如下所示

Status.js

import firebase from 'firebase/app';
import { todosRef, authRef, provider } from './firebase';
import { FETCH_STATUS, FETCH_ONESTATUS } from './types.js';

const databaseRef = firebase.firestore();

export const fetchStatus = uid => async dispatch => {
    var data = [];

    databaseRef.collection('status').doc(uid).collection('status').get().then((snapshot) => {
        snapshot.forEach((doc) => {
            var snap = doc.data();
            snap.key = doc.id;
            data.push(snap);
            console.log(data); // I am getting values here
        });

        dispatch({
            type: FETCH_STATUS,
            payload: data,
        });
    });
};

我的组件如下所示

import React from "react";
import * as actions from './firebase/Status';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom'


class Status extends React.Component {

  componentWillMount() {
    const { auth } = this.props;
    this.props.fetchStatus(auth.uid);
  };


  renderStatus() {
    const { status } = this.props;
    const data = status ? Object.values(status) : [];

    console.log(status) // I am not getting values here
  }


  render() {
    return (
      //more HTML code
    );
  }
}

const mapStateToProps = ({ auth, status }) => {
  return {
    auth,
    status,
  }
}

export default connect(
  mapStateToProps,
  actions
)(Status);

【问题讨论】：

你的减速器状态形状/类型是什么？到处都是。初始值/默认值是布尔值，但如果有效负载是错误的，它将变为null，并且FETCH_STATUS 操作会将其更改为数组。没有一致性，这会使您的状态难以使用和调试，因为它具有不确定性。在您的 Status 组件中，什么在调用 renderStatus 以及何时调用？此外，出于所有实际目的，componentWillMount 已被弃用，您应该改用componentDidMount。你的组合减速器是什么样的？这是正确的状态形状，state.status？
感谢@DrewReese 的回复。实际上有人编码了所有这些代码。你能指导我解决这个问题吗？谢谢。
当然，我们可以尝试，但我们需要更多的上下文。您能否更新您的问题以包含更多 Minimal, Complete, and Reproducible 代码示例？我们能否查看所有这些组件代码以查看何时何地调用 renderStatus，以及您的减速器和主根减速器，以便我们更好地了解您的状态形状？

标签： reactjs react-redux redux-thunk

【解决方案1】：

您的Status.js 文件有问题。您正在从 firebase 获取数据并尝试分派它。但问题是你的程序在从firebase获取数据之前调度。所以你可以使用 JS Promise。也许这会有所帮助！！！

...
const request = snapshot.forEach((doc) => {
    return new Promise((resolve) => {
        var snap = doc.data();
        snap.key = doc.id;
        console.log(data); // I am getting values here
  });
});

Promise.all(request).then(() => {
    dispatch({
      type: FETCH_STATUS,
      payload: data,
  });
});
...

【讨论】：

感谢@dkpradeep 的回复。但是类似的代码在另一个组件中运行良好。我正在尝试复制另一个开发人员的代码。谢谢。
我认为您的回答不正确。 status.forEach 和 dispatch 都出现在最后一个 .then 块的同一范围内。代码是同步的，所以 all 的status.forEach 被处理以构建data 数组，然后调度该数组。您的新 Promise 也从不解析，因此 Promise.all 不会解析，也不会更新 data。