Как включить несколько объектов json-массива в компонент реакции

Question

Я хотел бы перебрать эту строку json и ввести значения в компонент реакции: {"users":[{"name":"jkhhjjh","url":"https://stackoverflow.com/users/240/individual_show"},{"name":"bob","url":"https://stackoverflow.com/users/241/individual_show"}]} Теперь я могу сделать один компонент из первого или второго объекта в индексе json но я не могу перебирать всю строку. Моя реагировать-JSX код ниже: enter code here

var FriendInfo = React.createClass({ 
 
    getInitialState: function() { 
 
    return { 
 
     url: '', 
 
     name: '' 
 
    }; 
 
    }, 
 

 
    componentDidMount: function() { 
 
    $.get(this.props.source, function(user) { 
 
     var users= user["users"][0]; 
 
     if (this.isMounted()) { 
 
     this.setState({url: users.url, 
 
      url: users.url, 
 
      name: users.name 
 
     }); 
 
     } 
 
    }.bind(this)); 
 
    }, 
 

 
    render: function() { 
 
    return (
 
     <div className="friendInfo"> 
 
       <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/92/SRC-TV.svg/140px-SRC-TV.svg.png"></img> 
 
       <a href={this.state.url}>{this.state.name}</a> 
 
     </div> 
 
    ); 
 
    } 
 
}); 
 

 
var RequestLinks= React.createClass({ 
 
    render: function() { 
 
    return (
 
     <div className="requestLinks" style={{float:"right"}}> 
 
     <a href="accept.com">accept</a> 
 
     <a href="deny.com">deny</a> 
 
     </div> 
 
    ); 
 
    } 
 
}); 
 

 
var FriendBox = React.createClass({ 
 
    render: function() { 
 
    return (
 
     <div className="friendBox"> 
 
     <FriendInfo source="/individual_relationships/show"/> 
 
     <RequestLinks /> 
 
     </div> 
 
    ); 
 
    } 
 
}); 
 
React.render(<FriendBox />, document.getElementById('test'));`enter code here`

После строки var users= user["users"][0] я могу вставить данные в одну итерацию компонента. Я хотел бы сделать цикл, который будет перебирать более user["users"][0] и user["users"][1], чтобы сделать два компонента на странице. Как мне это сделать?

Answer 1

Вам нужно использовать функцию карты, которая возвращает массив индивидуальных элементов.

var FriendInfo = React.createClass({ 
 
    getInitialState: function() { 
 
return { 
 
    users: [] 
 
}; 
 
    }, 
 

 
    componentDidMount: function() { 
 
$.get(this.props.source, function (user) { 
 
    var users = user["users"]; 
 
    if (this.isMounted()) { 
 
    this.setState({users: users}); 
 
    } 
 
}.bind(this)); 
 
    }, 
 

 
    render: function() { 
 
return (
 
    <div> 
 
{ 
 
    this.state.users.map(function (user) { 
 

 
return <div className="friendInfo"> 
 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/92/SRC-TV.svg/140px-SRC-TV.svg.png"></img> 
 
    <a href={user.url}>{user.name}</a> 
 
</div> 
 
    }) 
 
    
 
    } 
 
    </div> 
 
); 
 
    } 
 
}); 
 

 
var RequestLinks = React.createClass({ 
 
    render: function() { 
 
return (
 
    <div className="requestLinks" style={{float: "right"}}> 
 
    <a href="accept.com">accept</a> 
 
    <a href="deny.com">deny</a> 
 
    </div> 
 
); 
 
    } 
 
}); 
 

 
var FriendBox = React.createClass({ 
 
    render: function() { 
 
return (
 
    <div className="friendBox"> 
 
    <FriendInfo source="/individual_relationships/show"/> 
 
    <RequestLinks /> 
 
    </div> 
 
); 
 
    } 
 
}); 
 
React.render(<FriendBox />, document.getElementById('test'));