प्रतिक्रिया दें कि JSON फ़ाइल में ऑब्जेक्ट्स तक कैसे पहुंचे - जेसन, रिस्पॉज, रिएक्ट-राउटर

मैं कुछ प्रोजेक्ट को कोड कर रहा हूं और मेरे पास एक json फाइल हैवस्तुओं के साथ। मेरी JSON फ़ाइल में उपयोगकर्ताओं की सूची है। मैंने उस सूची को एक तालिका के साथ एक घटक में आयात किया। अब मेरे पास उपयोगकर्ताओं की सूची और उनके विवरण के साथ अच्छी तालिका है। मैं आगे क्या करना चाहता हूं, प्रत्येक पंक्ति में "विवरण" बटन बनाना है और बटन पर क्लिक करें अन्य घटक में उपयोगकर्ता के बारे में सभी जानकारी लोड करें जो तालिका के बगल में प्रदान की जाएगी। मूल रूप से मैं जो बनाना चाहता हूं वह दाईं ओर उपयोगकर्ताओं की एक सूची है और बाईं ओर विशिष्ट उपयोगकर्ता के बारे में विवरण है। तालिका में परिवर्तन नहीं होता है, उपयोगकर्ताओं की जानकारी के साथ केवल बाईं ओर घटक बदलता है। सबसे बड़ी समस्या यह है कि मुझे पता है कि 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
}]

अनुलेख मेरी अंग्रेजी के लिए खेद है।

उत्तर:

आप उपयोग कर सकते हैं फिल्टर निर्दिष्ट आईडी के साथ केवल मान को फ़िल्टर करने की विधि।

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

ज्ञात हो, कि यह कोड मानता है कि निर्दिष्ट आईडी वाला उपयोगकर्ता मौजूद है।

इस कोड का उपयोग रिएक्ट घटक में किया जा सकता है, या आप अपने सर्वर पर विशिष्ट समापन बिंदु बना सकते हैं।

UserDetails घटक में (मुझे नहीं पता कि यह कैसे हैआपके मामले में जैसा दिखता है), आपके पास उपयोगकर्ता की आईडी होगी, इसलिए आपको मूल रूप से ऐसा ही कुछ करने की ज़रूरत है जो आप UserListContainer घटकWillMount विधि में करते हैं, जो है: उपयोगकर्ताओं को लोड करें, फिर उस सूची को फ़िल्टर करें जिसमें उपयोगकर्ता आईडी है।