数组中的React Map数据驻留在一个对象中

Question

我从axios成功阶段获取了以下json结果集。我需要将{ "welcome": { "greeting": [ "Hello", "Bonjour", "Hola" ], "farewell": [ "Goodbye", "Au revoir", "Adiós" ] } } 的结果对象的输出列出到无序列表的y元素或recordResult中。我已采用<li></li>和<div>的值。但是我该如何映射code的数据并在前端进行填充？

message

Answer 1

您可以通过Object.keys映射到recordResult上：

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

让我知道是否有此帮助。

Answer 2

可以使用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 3

在这里，你去哥们：）

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>