Reagieren, wie Objekte in JSON-Datei zu erreichen

Question

Ich bin ein Projekt codieren und ich habe eine JSON-Datei mit Objekten. In meiner JSON-Datei gibt es eine Liste von Benutzern. Ich habe diese Liste in eine Komponente mit einer Tabelle importiert. Jetzt habe ich eine nette Tabelle mit einer Liste von Benutzern und deren Details. Was ich als nächstes tun möchte, ist die Schaltfläche "Details" in jeder Zeile und die Schaltfläche "OnClick", um alle Informationen über den Benutzer in einer anderen Komponente zu laden, die neben der Tabelle gerendert wird. Grundsätzlich möchte ich eine Liste von Benutzern auf der rechten Seite und Details zu bestimmten Benutzern auf der linken Seite machen. Tabelle ändert sich nicht, ändert nur die linke Komponente mit Benutzerinformationen. Größtes Problem ist, dass ich weiß, wie man JSON-Datei in Tabelle von http://localhost:3000/users.json lädt, aber ich weiß nicht, wie man bestimmte Gegenstände durch ihre Identifikation erreicht. zum Beispiel http://localhost:3000/users/1

Mein Container laden json:

import React, { Component } from 'react'; 
import axios from 'axios'; 
import UserListComponent from './UserListComponent'; 

class UserListContainer extends Component { 
    constructor(props){ 
    super(props); 

    this.state = { 
     users: [] 
    }; 
    } 
    componentWillMount(){ 
    var self = this; 
    axios.get('http://localhost:3000/users.json') 
    .then((response) => { 
     self.setState({ users: response.data }); 
    }) 
    } 
    render(){ 
    return(
     <UserListComponent users={this.state.users} /> 
    ); 
    } 
} 

export default UserListContainer; 

diese Benutzer Tabellen-Komponente: mein index.js

import React, { Component } from 'react'; 
import PropTypes from 'prop-types'; 
import { Link } from 'react-router-dom'; 

class UserCardComponent extends Component { 
    render(){ 
    return(
     <tr className='clickable-row' data-href='url://'> 
     <td>{this.props.id}</td> 
     <td>{this.props.name}</td> 
     <td>{this.props.surname}</td> 
     <td>{this.props.city}</td> 
     <td>{this.props.email}</td> 
     <td>{this.props.phone}</td> 
     <Link to={'/user/'+this.props.id} className="btn btn-primary">Details</Link> 
     </tr> 
    ); 
    } 
} 

UserCardComponent.propTypes = { 
    id: PropTypes.number.isRequired, 
    name: PropTypes.string.isRequired, 
    surname: PropTypes.string.isRequired, 
    city: PropTypes.string.isRequired, 
    email: PropTypes.string.isRequired, 
    phone: PropTypes.string.isRequired 
}; 

export default UserCardComponent; 

und es gibt:

import '../node_modules/bootstrap/dist/css/bootstrap.css'; 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
import './index.css'; 
import App from './App'; 
import UserDetails from './UserDetails'; 
import ContentComponent from './ContentComponent'; 
import registerServiceWorker from './registerServiceWorker'; 
import { 
    BrowserRouter as Router, 
    Route, 
    Link 
} from 'react-router-dom'; 
import jQuery from 'jquery' 
global.jQuery = jQuery 
global.jquery = jQuery // jquery lowercase was the solution 
global.$ = jQuery 
let Bootstrap = require('bootstrap') 

ReactDOM.render(
    <Router> 
    <App> 
     <Route exact path="/" component={ContentComponent} /> 
     <Route path="contact/:id" component={UserDetails} /> 
    </App> 
    </Router>, document.getElementById('root')); 
registerServiceWorker(); 

Meine Nutzer .json-Datei:

[{ 
    "id": 1, 
    "name": "Pempe", 
    "surname": "Pampino", 
    "city": "Torino", 
    "email": "Asde@dt.com", 
    "phone": "+568888", 
    "active": true 
}, { 
    "id": 2, 
    "name": "John", 
    "surname": "Johnson", 
    "city": "Moscow", 
    "email": "john.johonson@moscow.ru", 
    "phone": "+216545646", 
    "active": true 
}, { 
    "id": 3, 
    "name": "Anton", 
    "surname": "Antonov", 
    "city": "Los Angeles", 
    "email": "Antonov.an@tri.ru", 
    "phone": "+5654448", 
    "active": true 
}] 

P.S. Entschuldigung für mein Englisch.

Answer 1

Sie können die Methode filter verwenden, um nur den Wert mit der angegebenen ID zu filtern.

function getUserById(id) { return this.state.users.filter(x => (x.id === id))[0] }

Bitte beachten Sie, dass dieser Code wird davon ausgegangen, dass der Benutzer mit dem angegebenen ID existiert.

Dieser Code kann in der React-Komponente verwendet werden, oder Sie können einen bestimmten Endpunkt auf Ihrem Server erstellen.

Answer 2

In der UserDetails-Komponente (ich bin mir nicht sicher, wie es in Ihrem Fall aussieht), haben Sie die ID des Benutzers, also müssen Sie im Grunde etwas ähnliches tun, was Sie in UserListContainer ComponentWillMount-Methode tun : Laden Sie die Benutzer und filtern Sie dann die Liste mit der Benutzer-ID heraus.