Javascript 减速器正确返回有效负载，但组件接收到未定义的有效负载

我正在实现一个应用程序，从firebase中获取一些数据。firebase数据库不需要身份验证，我已经更改了公共访问的规则

但是，我有一个使用firebase键从数据库中获取特定行的操作：

export function fetchClient(id) {
  return (dispatch) => {
     database.ref(`/clients/${id}`)
        .on('value', snapshot => {
            console.log(snapshot.val());
        dispatch({
            type: FETCH_CLIENT,
            key: id, // Adding the Firebase KEY here
            payload: snapshot.val()
        });
     }); 
  };
} 

行动

export function fetchClient(id) {
  return (dispatch) => {
     database.ref(`/clients/${id}`)
        .on('value', snapshot => {
            console.log(snapshot.val());
        dispatch({
            type: FETCH_CLIENT,
            payload: snapshot.val()
        });
     }); 
  };
} 

Console.log显示已成功检索数据

My reducer还成功返回有效负载：

减速器

const INITIAL_STATE = {}

export default function (state = INITIAL_STATE, action) {
 switch(action.type){
    case FETCH_CLIENTS:
        return action.payload;
    case FETCH_CLIENT:
        console.log(action.payload );
        return { ...state, [action.payload.id]: action.payload };
    case CREATE_CLIENT:
        return action.payload;
    default: 
        return state;
  }
}

然而，当我从上一个页面链接到该组件时，该组件接收的负载是未定义的，当我刷新该页面时，该组件显然是空的

组件

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchClient } from '../actions';
import { Link } from 'react-router-dom';

class ClientShow extends Component {

componentDidMount() {
  const { id } = this.props.match.params;
  console.log(this.props);
  this.props.fetchClient(id);
}
render(){
  const { myClient } = this.props;
  if (!myClient) {
    return (
        <div>
            <Link className="btn btn-danger" to="/" >Home</Link>
            <div>Loading...</div>
        </div>
    );
  }
  return (
    <div>
        <Link to="/"  className="btn btn-primary" >Home</Link>
        <h2>{myClient.name}</h2>
        <h4>The client is loaded... but undefined</h4>
    </div>
  ); 
 }
}

function mapStateToProps({ clients }, ownProps) {
  //console.log(ownProps.match.params.id);    
  return { myClient: clients[ownProps.match.params.id] };
}

export default connect(mapStateToProps, { fetchClient })(ClientShow);

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“../actions”导入{fetchClient}；
从'react router dom'导入{Link}；
类ClientShow扩展了组件{
componentDidMount（）{
const{id}=this.props.match.params；
console.log（this.props）；
this.props.fetchClient（id）；
}
render（）{
const{myClient}=this.props；
如果（！myClient）{
返回(
家
加载。。。
);
}
返回(
家
{myClient.name}
客户端已加载…但未定义
); 
}
}
函数mapStateToProps（{clients}，ownProps）{
//日志（ownProps.match.params.id）；
返回{myClient:clients[ownProps.match.params.id]}；
}
导出默认连接（MapStateTops，{fetchClient}）（ClientShow）；

URL中的键显示正确，我从mapStateToProps中的console.log接收到正确的参数

控制台日志

Clients console.log表单client\u show组件

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchClient } from '../actions';
import { Link } from 'react-router-dom';

class ClientShow extends Component {

componentDidMount() {
  const { id } = this.props.match.params;
  console.log(this.props);
  this.props.fetchClient(id);
}
render(){
  const { myClient } = this.props;
  if (!myClient) {
    return (
        <div>
            <Link className="btn btn-danger" to="/" >Home</Link>
            <div>Loading...</div>
        </div>
    );
  }
  return (
    <div>
        <Link to="/"  className="btn btn-primary" >Home</Link>
        <h2>{myClient.name}</h2>
        <h4>The client is loaded... but undefined</h4>
    </div>
  ); 
 }
}

function mapStateToProps({ clients }, ownProps) {
  //console.log(ownProps.match.params.id);    
  return { myClient: clients[ownProps.match.params.id] };
}

export default connect(mapStateToProps, { fetchClient })(ClientShow);

---

所以，我终于在这里解决了这个问题

基本上，我并没有将firebase键从action发送到reducer，而是希望action.payload.id中包含id

现在，我在传递firebase密钥的对象中添加了一个新元素：

export function fetchClient(id) {
  return (dispatch) => {
     database.ref(`/clients/${id}`)
        .on('value', snapshot => {
            console.log(snapshot.val());
        dispatch({
            type: FETCH_CLIENT,
            key: id, // Adding the Firebase KEY here
            payload: snapshot.val()
        });
     }); 
  };
} 

然后，在我的减速机中：

case FETCH_CLIENT:
  return { ...state, [action.key]: action.payload };

---

你能不能也添加ClientShow组件hi@enzoborgfrantz，我添加了组件代码。你能在MapStateTops中尝试控制台记录客户端吗？我相信它实际上没有处于状态，因为你正在设置

return{…state，[action.payload.id]：action.payload}在状态上，而不是像
返回{…状态，客户端：[]}但是我可能是错的，这取决于
[action.payload.id]
所包含的内容您在日志中没有
id
propshown@enzoborgfrantz，我做了控制台日志，并在问题中添加了一个屏幕截图。实际上有点奇怪，我有一个额外的行，是前一行的副本，但没有键。第34行还有一个id的控制台日志。