Реагуйте, як досягти об'єктів у файлі JSON - json, реагує, re-router

Я кодую якийсь проект і маю файл jsonз предметами. У моєму файлі JSON є список користувачів. Я імпортував цей список до компонента з таблицею. Тепер у мене є приємна таблиця зі списком користувачів та їх деталями. Що я хочу зробити далі, це зробити кнопку "деталі" в кожному рядку, а кнопка onClick повинна завантажувати всю інформацію про користувача в інший компонент, який буде відображатися поруч із таблицею. в основному те, що я хочу зробити, це список користувачів з правого боку та деталі про конкретного користувача з лівого боку. Таблиця не змінюється, змінюється лише лівий компонент з інформацією про користувачів. Найбільша проблема полягає в тому, що я знаю, як завантажити файл JSON до таблиці http://localhost:3000/users.json, але я не знаю, як дістати певні об'єкти за їх ідентифікаторами, наприклад http://localhost:3000/users/1

Мій контейнер для завантаження 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;

це компонент таблиць користувачів:

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;

і є мій index.js:

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();

Мій файл users.json:

[{
"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. Вибачте за мою англійську.

Відповіді:

Ви можете використовувати фільтр метод фільтрування лише значення із зазначеним ідентифікатором.

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

Майте на увазі, що цей код передбачає існування користувача із зазначеним ідентифікатором.

Цей код можна використовувати в компоненті React, або ви можете створити конкретну кінцеву точку на своєму сервері.

У компоненті UserDetails (я не знаю, як цевиглядає як у вашому випадку), у вас буде ідентифікатор користувача, тому вам в основному потрібно зробити щось подібне до того, що ви робите в методі UserListContainer componentWillMount, тобто: завантажте користувачів, а потім відфільтруйте список, що має ідентифікатор користувача.