Javascript 如何引用React/Redux中对象状态的值？

我遇到了一个相当普遍的react/redux问题：

我的应用程序中有一个状态块，它是一个对象。每当我在我的组件中使用mapStateToProps时，我都能够验证我的对象是否存在，并且它的所有字段都已定义，但当我尝试获取字段的值时，我会得到“未定义”。我的做法如下：

客户表格.js

export default function(state = {}, action) {
  switch(action.type) {
   case UPDATE_CLIENT_INFO:
      console.log('Client: ', action.payload);
      console.log('First Name: ', action.payload.firstName);
      return { ...state,
        client: {
          firstName: action.payload.firstName,
          lastName: action.payload.lastName,
          homePhone: action.payload.homePhone,
          cellPhone: action.payload.cellPhone,
          email: action.payload.email,
          address: action.payload.address,
          customerMOB: action.payload.customerMOB,
          customerYOB: action.payload.customerYOB
        }
    }
  }
  return state;
} 

我在rootReducer中连接所有的reducer：

index.js

//other import statements
import customerReducer from './customer_form_reducer';

const rootReducer = combineReducers({
  form,
  auth: authReducer,
  admin: adminReducer,
  client: customerReducer,
  spouse: spouseReducer,
  child: childReducer,
  other: otherReducer,
  accountId: accountIdReducer,
  customerId: customerIdReducer
});

export default rootReducer;

现在在我的组件中：

客户信息表单js

import { reduxForm } from 'redux-form';

class CustomerInfoForm extends Component {
  constructor(props) {
    super(props);

    this.state = {
      accountId: props.accountId,
      client: props.client,
      firstName: props.firstName,
    };

    console.log(this.state.accountId);
    console.log(this.state.client);
    console.log(this.state.client.firstName);
    console.log(this.state.firstName);
 }

function mapStateToProps(state) {
  return { accountId: state.accountId, client: state.client, 
firstName: state.client.firstName }
}

export default reduxForm({
  form: 'CustomerInfoForm',
  fields: _.keys(FIELDS),
  validate
}, mapStateToProps, { updateClientInfo })(CustomerInfoForm);

---

这里的前两个控制台日志打印正确的数据。接下来的两个是我使用/引用存储在客户端对象中的值的两次不同尝试。两者都返回“undefined”，即使我的控制台在上面一行声明我的客户机对象有一个已定义的名字。如何使用/引用客户端对象中包含的实际值？

customer\u form\u reducer.js中的默认状态是空对象。您希望打印什么值？

customer\u form\u reducer.js中的默认状态为空对象。您希望它打印什么值？

抱歉，我要澄清一下，在运行此测试之前，我正在发送更新\u客户端\u信息操作。“console.log（this.state.client）”生成的实际对象使用正确填充的值登录到控制台。然后我尝试引用其中一个字段，该字段的值返回为未定义。第二个日志的输出是什么？对象{firstName:“ClientName”，lastName:“ClientLast”，homePhone:“411”，phone:“511”，email:“clientname@client.com“…}它正在吐出物体。我认为问题可能是，尽管在构造函数中设置了对象，但实际值尚未计算。上面的控制台日志包含一条警告：“值刚刚被计算过”。很抱歉，我刚刚注意到日志在您的构造函数中。我知道，对于一个普通的组件，你应该能够做这样的事情。也许您想修改正在传递的道具的格式。如果这是您的目标，您可以为此编写一个函数，并在render方法中的道具上调用它。至于问题发生的原因，我怀疑是因为您希望使用的道具是从redux存储传递过来的。我提出的解决方法是在componentWillMount（）函数中调用setState（{client:this.state.client}）。对我来说似乎是多余的，但我现在可以访问对象中的数据。很抱歉，为了澄清我在运行此测试之前正在调度我的UPDATE\u CLIENT\u INFO操作。“console.log（this.state.client）”生成的实际对象使用正确填充的值登录到控制台。然后我尝试引用其中一个字段，该字段的值返回为未定义。第二个日志的输出是什么？对象{firstName:“ClientName”，lastName:“ClientLast”，homePhone:“411”，phone:“511”，email:“clientname@client.com“…}它正在吐出物体。我认为问题可能是，尽管在构造函数中设置了对象，但实际值尚未计算。上面的控制台日志包含一条警告：“值刚刚被计算过”。很抱歉，我刚刚注意到日志在您的构造函数中。我知道，对于一个普通的组件，你应该能够做这样的事情。也许您想修改正在传递的道具的格式。如果这是您的目标，您可以为此编写一个函数，并在render方法中的道具上调用它。至于问题发生的原因，我怀疑是因为您希望使用的道具是从redux存储传递过来的。我提出的解决方法是在componentWillMount（）函数中调用setState（{client:this.state.client}）。对我来说似乎是多余的，但我现在可以访问对象中的数据了。