反应如何达到JSON文件中的对象

Z时代
2024-01-10
分类：问答

我正在编写一些项目，并且我有一个带有对象的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 
}]