Реагировать на данные карты в массивах находится в объекте

Question

У меня следующий набор результатов json, взятый из фазы успеха axios.Мне нужно перечислить вывод объекта результата recordResult в элементы неупорядоченного списка <li></li> или в <div> s.Я взял значения code и message.Но как я могу отобразить данные recordResult и заполнить их во внешнем интерфейсе?

`{
  "code": 1,
  "message": "success",
  "result": {
    "recordResult": {
      "red": [],
      "blue": [
        "dist: 12formats",
        "xvalue: 22formats",
        "yvalue: 88formats",
        "zvalue: dhformats",
        "tre: outline",
        "input: Non-critical"
      ],
      "green": [
        "dist: 12formats",
        "xvalue: 22formats",
        "yvalue: 88formats",
        "zvalue: dhformats",
        "tre: outline",
        "input: Non-critical",
        "on: outline",
        "up: true"
      ],
      "yellow": []
    }
  }
}`

Answer 1

Это можно сделать, используя Object.keys и map

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      data: {
        code: 1,
        message: "success",
        result: {
          recordResult: {
            red: [],
            blue: [
              "dist: 12formats",
              "xvalue: 22formats",
              "yvalue: 88formats",
              "zvalue: dhformats",
              "tre: outline",
              "input: Non-critical"
            ],
            green: [
              "dist: 12formats",
              "xvalue: 22formats",
              "yvalue: 88formats",
              "zvalue: dhformats",
              "tre: outline",
              "input: Non-critical",
              "on: outline",
              "up: true"
            ],
            yellow: []
          }
        }
      }
    };
  }

  render() {
    let { data } = this.state;
    let results = data.result.recordResult;

    return (
      <div>
        {Object.keys(results).map(x => {
          return (
              <ul>
                <li><h3>{x}</h3></li>
                {results[x].length > 0 && <ul>
                  {results[x].map(e => <li>{e}</li>)}
                </ul>}
              </ul>
          );
        })}
      </div>
    );
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

Вот, пожалуйста, чувак :) 1001

class MyComp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      "code": 1,
      "message": "success",
      "result": {
        "recordResult": {
          "red": [],
          "blue": [
            "dist: 12formats",
            "xvalue: 22formats",
            "yvalue: 88formats",
            "zvalue: dhformats",
            "tre: outline",
            "input: Non-critical"
          ],
          "green": [
            "dist: 12formats",
            "xvalue: 22formats",
            "yvalue: 88formats",
            "zvalue: dhformats",
            "tre: outline",
            "input: Non-critical",
            "on: outline",
            "up: true"
          ],
          "yellow": []
        }
      }
    };
  }
  
  render() {
    return (
      <div>
        <h2>My Items</h2>
        <ul>
        {Object.keys(this.state.result.recordResult).map(k => {
          return (
          	<li key={k}>{k}
              {this.state.result.recordResult[k].length > 0 &&
              	(
                <ul>
                  {this.state.result.recordResult[k].map(v => (
                  	<li key={v}>{v}</li>
                  ))}
                </ul>
                )
              }
            </li>
        )})}
        </ul>
      </div>
    )
  }
}

ReactDOM.render(<MyComp />, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Answer 3

Вы можете сопоставить записьResult с помощью Object.keys:

Object.keys(obj.result.recordResult).map(function(key, index) {
  return (
           <div>key</div>  
         )
});

Дайте мне знать, если эта справка.