Question

我正在编写一些项目，我有一个带有对象的json文件。在我的JSON文件中有用户列表。我确实将该列表导入到带有表的组件中。现在我有一个很好的表与用户列表及其详细信息。我接下来要做的是制作详细信息＆＃39;每一行中的按钮和onClick按钮应该在其他组件中加载有关用户的所有信息，这些信息将在表格旁边呈现。基本上我想要的是右侧的用户列表和左侧特定用户的详细信息。表没有变化，只更改左侧组件与用户信息。最大的问题是我知道如何从http://localhost:3000/users.json加载json文件到表，但我不知道如何通过他们的id来访问某些对象。例如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。抱歉我的英文。

Answer 1

您可以使用filter方法仅过滤具有指定ID的值。

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

请注意，此代码假定存在具有指定ID的用户。

此代码可用于React组件，或者您可以在服务器上创建特定端点。

Answer 2

在UserDetails组件中（我不确定在你的情况下它是什么样子），你将拥有用户的id，所以你基本上需要做类似于你在UserListContainer componentWillMount方法中做的事情，即：加载用户，然后过滤掉具有用户ID的列表。

了解如何在JSON文件中访问对象

2 个答案: