反应如何访问 JSON 文件中的对象

Question

我正在编写一些项目，并且我有一个包含对象的 json 文件。在我的 JSON 文件中有用户列表。我确实将该列表导入到带有表格的组件中。现在我有一个很好的表格，上面有用户列表和他们的详细信息。我接下来要做的是在每一行中制作“详细信息”按钮，并且 onClick 按钮应该加载其他组件中有关用户的所有信息，这些信息将在表格旁边呈现。基本上我想做的是右侧的用户列表和左侧特定用户的详细信息。表格不会改变，只改变带有用户信息的左侧组件。最大的问题是我知道如何将 json 文件从http://localhost:3000/users.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
}]

附：对不起我的英语。

Answer 1

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

Answer 2

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

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

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

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