对象作为反应元素无效

Question

请我知道这个问题是重复的，但就我而言，我只是找不到解决方案。我有一个对象。我正在使用选择器从我的状态中选择这个对象，如下所示：

export const customerDetailsState = (state, selectedCustomer) => {
  if (customerState(state).getIn([CUSTOMER_SESSION, 'details'])) {
    return customerState(state).getIn([CUSTOMER_SESSION, 'details', selectedCustomer]);
  }
  return {};
};

我现在将它作为我的 mapStateToProps 函数的道具，如下所示：

export const mapStateToProps = (state) => {
  const selectedCustomer = selectedCustomerState(state);
  return {
    customerDetails: customerDetailsState(state, selectedCustomer)
  };
};

然后在我的组件中：const CustomerDetails = ({ customerDetails }) => (

此错误不断显示：

对象作为 React 子对象无效（找到：带键的对象 {lastName, firstName, IdentificationType, IdentificationCode, taxId, 街道名称、街道编号、城市、商业名称、州、邮政编码、 国家代码，国家

我的组件是：

const CustomerDetails = ({ customerDetails }) => (
  <Card>
    <CardTitle title="Πληροφορίες Πελάτη" />
    <CardHeader
      title="Δεδομένα Altamira"
      showExpandableButton
    />
    <CardText expandable>
      <div>
        <TextField
          value={customerDetails.commercialName}
          floatingLabelText={CUSTOMER_DETAILS_COMMERCIAL}
        /><br />
        <TextField
          value={customerDetails.lastName}
          floatingLabelText={CUSTOMER_DETAILS_LASTNAME}
        /><br />
        <TextField
          value={customerDetails.firstName}
          floatingLabelText={CUSTOMER_DETAILS_NAME}
        /><br />
      </CardText>
   </Card>
);

我想把它作为道具传递！如何在没有此错误的情况下通过它？请不要将其标记为重复。谢谢！

Answer 1

因为你的函数没有返回任何东西。返回jsx，问题就解决了。

const CustomerDetails = ({ customerDetails }) => (return(
 <Card>
   <CardTitle title="Πληροφορίες Πελάτη" />
   <CardHeader
     title="Δεδομένα Altamira"
     showExpandableButton
   />
  <CardText expandable>
  <div>
    <TextField
      value={customerDetails.commercialName}
      floatingLabelText={CUSTOMER_DETAILS_COMMERCIAL}
    /><br />
    <TextField
      value={customerDetails.lastName}
      floatingLabelText={CUSTOMER_DETAILS_LASTNAME}
      /><br />
      <TextField
        value={customerDetails.firstName}
        floatingLabelText={CUSTOMER_DETAILS_NAME}
       /><br />
     </CardText>
   </Card>);
);

render(){ return(this.CustomerDetails(customerDetails))};