带有嵌套 JSON 的 React/Redux mapStateToProps

我有一个正在解析 JSON 的 redux 组件（在底部），但我不知道如何获取嵌套的子对象。我认为我没有正确理解 mapStateToProps 的工作原理。

控制台日志正在转储子对象，但是当我尝试访问 services.name 时，我得到

"Cannot read property 'name' of undefined"

有人可以帮助我了解如何在这里映射属性吗？我在底部提供了一个从 API 获取的 JSON 示例。

服务列表.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../actions';

class ServicesList extends Component {

  componentDidMount(){
    this.props.fetchServices();
  }

  render() {
    //console.log('render called in ServicesList component');
    return (
      <table className='table table-hover'>
        <thead>
          <tr>
            <th>Service Name</th>
          </tr>
        </thead>
        <tbody>
          {this.props.services.map(this.renderServices)}
        </tbody>
      </table>
    );
  }

  renderServices(data) {
    console.log(data.services);
    const name = data.services.name;
    return(
      <tr key={name}>
        <td>{name}</td>
      </tr>
    );
  }
}

function mapStateToProps({services}) {
  return { services };
}

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

我的 JSON 看起来像这样：

{
  "services": [
     {
        "name": "redemption-service",
        "versions": {
            "desired": "20170922_145033",
            "deployed": "20170922_145033"
        },
        "version": "20170922_145033"
    }, {
        "name": "client-service",
        "versions": {
            "desired": "20170608_094954",
            "deployed": "20170608_094954"
        },
        "version": "20170608_094954"
    }, {
        "name": "content-rules-service",
        "versions": {
            "desired": "20170922_130454",
            "deployed": "20170922_130454"
        },
        "version": "20170922_130454"
    }
  ]
}

最后，我有一个在此处公开 axios.get 的操作：

import axios from 'axios';

const ROOT_URL=`http://localhost:8080/services.json`;

export const FETCH_SERVICES = 'FETCH_SERVICES';

export function fetchServices(){
  const url = `${ROOT_URL}`;
  const request = axios.get(url);

  return{
    type: FETCH_SERVICES,
    payload: request
  };
}

我假设你认为this.props.fetchServices()将更新services减速器然后将通过services作为道具通过mapStateToProps.
如果这是正确的，请注意您正在获取内部componentWillMount这是一个BIG no no.
引用自componentWillMount DOCS https://facebook.github.io/react/docs/react-component.html#componentwillmount:

避免在此方法中引入任何副作用或订阅。

你应该获取数据componentDidMount.

此外，您可能认为在从 ajax 请求返回数据之前不会调用 render 方法。你看，react 不会等待你的 ajax 调用返回数据，render无论如何都会调用方法，所以第一个render致电将尝试map在一个空数组上services（我假设你的减速器中有一个空数组作为初始状态）。
那么你的renderServices函数将得到一个空数组data and data.services确实是undefined因此当你尝试访问时data.services.name你得到错误：

“无法读取未定义的属性‘名称’”

只需在渲染中使用一个条件：

<tbody>
  {this.props.services && this.props.services.map(this.renderServices)}
</tbody>

Edit
作为您评论的后续行动，您正在尝试绘制object but .map适用于数组。所以实际上你应该映射services.services.map(...)代替services.map，尽管你仍然需要检查它是否存在。
我已经用您的代码制作了一个工作示例，我没有包含 redux 和 ajax 请求，但我使用了您正在使用的相同数据，并且我仅在第二次渲染时传递它ServicesList，所以它基本上与您面临的情况相同。
我什至添加了一个超时来模拟延迟+添加了一个加载指示器来演示您可以（或应该）使用条件渲染做什么。

const fakeData = {
  services: [
    {
      name: "redemption-service",
      versions: {
        desired: "20170922_145033",
        deployed: "20170922_145033"
      },
      version: "20170922_145033"
    },
    {
      name: "client-service",
      versions: {
        desired: "20170608_094954",
        deployed: "20170608_094954"
      },
      version: "20170608_094954"
    },
    {
      name: "content-rules-service",
      versions: {
        desired: "20170922_130454",
        deployed: "20170922_130454"
      },
      version: "20170922_130454"
    }
  ]
};

class ServicesList extends React.Component {
  componentDidMount() {
    this.props.fetchServices();
  }

  render() {
    const { services } = this.props;

    return (
      <table className="table table-hover">
        <thead>
          <tr>
            <th>Service Name</th>
          </tr>
        </thead>
        <tbody>
          {services.services ? (
            services.services.map(this.renderServices)
          ) : (
            this.renderLoader()
          )}
        </tbody>
      </table>
    );
  }

  renderLoader() {
    return (
      <tr>
        <td>Loading...</td>
      </tr>
    );
  }

  renderServices(data) {
    const name = data.name;
    return (
      <tr key={name}>
        <td>{name}</td>
      </tr>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {}
    };
    this.fetchServices = this.fetchServices.bind(this);
  }

  fetchServices() {
    setTimeout(() => {
      this.setState({ data: { ...fakeData } });
    }, 1500);
  }

  render() {
    const { data } = this.state;
    return (
      <div>
        <ServicesList services={data} fetchServices={this.fetchServices} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>