反應如何達到JSON文件中的對象

我正在編寫一些項目，並且我有一個帶有對象的json文件。在我的JSON文件中有用戶列表。我沒有將該列表導入帶有表格的組件。現在我有很好的用戶列表和他們的細節表。接下來我要做的是在每一行中創建「詳細信息」按鈕，並使用onClick按鈕加載所有關於其他組件中用戶的信息，這些信息將在表格旁邊呈現。基本上我想做的是右側的用戶列表和左側的特定用戶的詳細信息。表格不會改變，只更改左側組件和用戶信息。最大的問題是，我知道如何從http://localhost:3000/users.json加載json文件到表，但我不知道如何通過他們的id到達某些對象。例如http://localhost:3000/users/1 反應如何達到JSON文件中的對象

我的容器裝載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();

我的用戶.json文件：

[{ 
    "id": 1, 
    "name": "Pempe", 
    "surname": "Pampino", 
    "city": "Torino", 
    "email": "[email protected]", 
    "phone": "+568888", 
    "active": true 
}, { 
    "id": 2, 
    "name": "John", 
    "surname": "Johnson", 
    "city": "Moscow", 
    "email": "[email protected]", 
    "phone": "+216545646", 
    "active": true 
}, { 
    "id": 3, 
    "name": "Anton", 
    "surname": "Antonov", 
    "city": "Los Angeles", 
    "email": "[email protected]", 
    "phone": "+5654448", 
    "active": true 
}]

P.S.對不起我的英語不好。

來源

2017-12-27 Paulius

[通過反應路由器中的鏈接傳遞對象]的可能副本（https://stackoverflow.com/questions/31168014/pass-object-through-link-in-react-router） – pyhazard

您可以使用filter方法來僅過濾指定id的值。

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

請注意，此代碼假定使用指定的ID的用戶存在。

此代碼可用於React組件，或者您可以在服務器上創建特定端點。

來源

2017-12-27 14:10:26

在UserDetails組件中（我不確定它是如何看起來像你的情況），你將有用戶的id，所以你基本上需要做類似於你在UserListContainer componentWillMount方法中做的事情，那就是：加載用戶，然後過濾出具有用戶標識的列表。

來源

2017-12-27 14:12:04

反應如何達到JSON文件中的對象

回答

相關問題