javascript - 从 api 调用映射时检索嵌套 JSON 对象

Question

我正在努力将 JSON 映射到 React 中的数据驱动渲染。为了完成一些我需要做的事情。我需要嵌套 JSON。 当尝试映射这些数据时，我不断遇到无法映射的值。特别是在尝试 (mapObject.object.value) 时，我尝试将嵌套值传递到插值 div 中。

JSON

{"PositionComponent": [
        {
            "key": 0,
            "Elevation": {
                "positionValue": "1.11566",
                "id": 0
            }
        },
        {
            "key": 1,
            "Azimuth": {
                "positionValue": "1.145657",
                "id": 1
            }
        }
    ]
}

react 组件:

import React, { Component } from 'react';
import '../HeaderBar/HeaderBar.css';
import 'whatwg-fetch';

type StatusBarProps = {};
type StatusBarState = {
    // tslint:disable-next-line:no-any
    positionStatus: any;
};

class StatusBar extends Component<StatusBarProps, StatusBarState> {
    constructor() {
        super();
        this.state = {
            positionStatus: []
        };
    }
    componentWillMount() {
        // maps azimuth and elevation for all objects
        fetch('http://localhost:5001/PositionComponent/').then(results => {
            return results.json();
        }).then(data => {
            let positionStatus = data.map((positioning) => {
                return (
                    <div className="temporary" key={positioning.key}>{positioning.Elevation.positionValue} : {positioning.Azimuth.positionValue}</div>
                );
            });
            this.setState({ positionStatus: positionStatus });
        });
    }
    render() {
        return (
            <div className="location">
                <div className="col-xs-12">
                    {this.state.positionStatus}
                </div>
            </div>
        );
    }
}

export default StatusBar;

相关的 JSON 已针对问题上下文提供，但出于开发速度的考虑，由 JSON.server 提供。问题似乎是我收到 Object {key: 0, Elevation: Object } Object { key: 1, Azimuth: Object } ，我无法通过调用向下进入对象本身{positioning.Elevation.positionValue}。我的问题是，我将如何进行映射，以便获得与仰 Angular 和方位 Angular 相关的内部对象值？

Answer 1

这里的主要问题是，每个包含您想要获取的嵌套键的对象上都有不同的键。
您可以尝试有条件地访问它，并检查是否存在 Elevation 或 Azimuth 并分别访问。
这种方法的缺点是，当您添加新 key 时，应添加另一个条件。所以您可能需要一种更通用的方法。

您可以通过keys使用Object.entries和.map并返回每个positionValue。如果某个键不包含它，则将评估 undefined，map 将忽略该键并且不会返回它。
像这样的事情:

Object.entries(positioning).map(([key, value]) => {
  return positioning[key].positionValue;
})

我会将渲染逻辑取出到另一个方法中，并且不会在状态中存储标记。
您想要更改的另一件事是 avoid the use of fetching or side effects in componentWillMount

这是您的代码的运行示例(我没有使用 fetch，因为我的服务器中没有您的数据)

const dataFromServer = [
  {
    key: 0,
    Elevation: {
      positionValue: "1.11566",
      id: 0
    }
  },
  {
    key: 1,
    Azimuth: {
      positionValue: "1.145657",
      id: 1
    }
  }
];

class StatusBar extends React.Component {
  constructor() {
    super();
    this.state = {
      positionStatus: []
    };
  }

  componentDidMount() {
    let positionStatus = dataFromServer;
    this.setState({ positionStatus: positionStatus });
  }

  renderPositionstatus = () => {
    const { positionStatus } = this.state;
    return (
      <div>
        {positionStatus.map(positioning => {
          return (
            <div className="temporary" key={positioning.key}>
              {Object.entries(positioning).map(([key, value]) => {
                return positioning[key].positionValue;
              })}
            </div>
          );
        })}
      </div>
    );
  };

  render() {
    return (
      <div className="location">
        <div className="col-xs-12">{this.renderPositionstatus()}</div>
      </div>
    );
  }
}

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

<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>