在React中遍历JSON [英] Iterating over JSON in React

问题描述

我有以下代码:

export class Highlights extends React.Component {
    render() {
        return (
            <div>
                {JSON.stringify(this.props.highlights_data.data)}
            </div>
        )
    }
}

这将打印出以下内容:

{活动":{标签":活动"，值":"12"}，自动":{标签":自动"，值":"8"}，正在等待:{" label:"正在等待，" value:" 1}，" manual:{" label:" Manual，" value:" 3}}

如何遍历highlights_data.data道具以调用沿label和value传递的另一个组件?

解决方案

除了@Dan的答案，我认为其他答案对您没有帮助/有用，因为它们不会遍历您的JSON对象. /p>

要正确执行此操作，您需要遍历JSON对象中的每个键.有几种方法可以执行此操作，其中一种方法是使用Object.keys().就像下面的代码片段一样.

此解决方案遍历JSON对象中的每个键，并将其推入数组.一旦有了该数组，就可以像通常一样使用map()遍历它，并将相关的props传递给另一个子组件.

 class MyApp extends React.Component {
  render() {
    var json = {"active":{"label":"Active","value":"12"},"automatic":{"label":"Automatic","value":"8"},"waiting":{"label":"Waiting","value":"1"},"manual":{"label":"Manual","value":"3"}};
    var arr = [];
    Object.keys(json).forEach(function(key) {
      arr.push(json[key]);
    });
    return <ul>{arr.map(item => <MyAppChild key={item.label} label={item.label} value={item.value} />)}</ul>;
  }
}

class MyAppChild extends React.Component {
  render() {
    return <li>{this.props.label + " - " + this.props.value}</li>;
  }
}

ReactDOM.render(<MyApp />, document.getElementById('myapp')); 

 <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="myapp"></div> 

I have following code:

export class Highlights extends React.Component {
    render() {
        return (
            <div>
                {JSON.stringify(this.props.highlights_data.data)}
            </div>
        )
    }
}

This prints out the following:

{"active":{"label":"Active","value":"12"},"automatic":{"label":"Automatic","value":"8"},"waiting":{"label":"Waiting","value":"1"},"manual":{"label":"Manual","value":"3"}}

How can I iterate over the highlights_data.data props to call another Component passing down label and value ?

解决方案

Except for @Dan's answer, I don't believe the other answers are any helpful/useful to you as they don't iterate through your JSON object.

To do this properly, you would need to iterate through each of your keys in your JSON object. There are a few ways you can do this, one of which is with Object.keys(). Like the code snippet below.

This solution iterates through each key in your JSON object and pushes it into an array. Once you have that array, you can iterate through it with map(), as you would normally, and pass your relevant props down to another child component.:

class MyApp extends React.Component {
  render() {
    var json = {"active":{"label":"Active","value":"12"},"automatic":{"label":"Automatic","value":"8"},"waiting":{"label":"Waiting","value":"1"},"manual":{"label":"Manual","value":"3"}};
    var arr = [];
    Object.keys(json).forEach(function(key) {
      arr.push(json[key]);
    });
    return <ul>{arr.map(item => <MyAppChild key={item.label} label={item.label} value={item.value} />)}</ul>;
  }
}

class MyAppChild extends React.Component {
  render() {
    return <li>{this.props.label + " - " + this.props.value}</li>;
  }
}

ReactDOM.render(<MyApp />, document.getElementById('myapp'));

<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="myapp"></div>

这篇关于在React中遍历JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！