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

Posted 2023-02-22

【中文标题】反应如何访问 JSON 文件中的对象

【英文标题】：React how to reach objects in JSON file

【发布时间】：2018-06-08 04:16:05

【问题描述】：

我正在编写一些项目，并且我有一个包含对象的 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": "[e-mail]",
    "phone": "+568888",
    "active": true
, 
    "id": 2,
    "name": "John",
    "surname": "Johnson",
    "city": "Moscow",
    "email": "[e-mail]",
    "phone": "[phone]",
    "active": true
, 
    "id": 3,
    "name": "Anton",
    "surname": "Antonov",
    "city": "Los Angeles",
    "email": "[e-mail]",
    "phone": "+5654448",
    "active": true
]

附：对不起我的英语。

【问题讨论】：

Pass object through Link in react router的可能重复

【参考方案1】：

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

【参考方案2】：

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

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

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

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