Получать и отображать новое содержимое, когда пользователь нажимает на каждый элемент списка [Реагировать]

Question

Сначала я хочу загрузить JSON с моего сервера; он будет содержать список объектов. Затем мне нужно визуализировать эти объекты как список. При щелчке элемента списка пользователь должен быть перенаправлен на страницу, на которой отображается информация о выбранном элементе. Эта отображаемая информация должна быть получена из другого вызова API на моем сервере.

Может, кто-нибудь направит меня, пожалуйста?

  state = {
    isLoading: true,
    users: [],
    error: null
  };

  fetchUsers() {
    fetch(`http://localhost:3001/blog/view`)
      .then(response => response.json())
      .then(data =>
        this.setState({
          users: data,
          isLoading: false,
        })
      )
      .catch(error => this.setState({ error, isLoading: false }));
  }

  componentDidMount() {
    this.fetchUsers();
  }
  render() {
    const { isLoading, users, error } = this.state;
    return (
      <React.Fragment>
        <h1  style={{textAlign: 'center'}}>My Blog</h1>
        {error ? <p>{error.message}</p> : null}
        {!isLoading ? (
          users.map(user => {
            const { _id, title, details,date } = user;

            return (

                <div className='blog'>

              <div key={_id}>
                <p>Name: {title}</p>
                <p>Email Address: {details}</p>
                <p >Email Address: {date}</p>
                <hr className='banner-text hr' />
              </div>
              </div>
            );
          })
        ) : (
          <h3>Loading...</h3>
        )}
      </React.Fragment>
    );
}
}

Answer 1

Вот пример проекта, который демонстрирует, как вы можете совместно использовать реагировать и реагировать на маршрутизатор.

Сначала мы получаем список пользователей из некоторых API, а затем отображаем их в виде списка. Используя реагирующий маршрутизатор, мы добавляем ссылку на каждый элемент, чтобы при нажатии на нее URL-адрес страницы изменялся

но страница не будет перезагружаться! это внутренние ссылки

Затем снова используя реагирующий маршрутизатор, мы отображаем различное содержимое в зависимости от URL. И наконец, у нас есть компонент UserPage, который при монтировании извлекает данные для конкретной пользовательской страницы и отображает ее.

Надеюсь, это достаточно ясно

---

Это очень хороший учебник по реагирующему маршрутизатору

И это официальный учебник по реагированию

Я настоятельно рекомендую вам посмотреть как они

---

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

App.js

import React, { Component } from 'react'
import {BrowserRouter as Router, Link, Route} from 'react-router-dom'
import User from "./User"
import UserPage from "./UserPage"

class App extends Component {
  constructor() {
    super()
    this.state = {
      users: [],
      isLoading: false
    }
  }
  componentDidMount() {
    this.setState({ isLoading: true })
    fetch('https://your/api/url')
        .then(response => response.json())
        .then(response => {
          this.setState({
            users: response,
            isLoading: false
          })
        })
  }

  render() {
    let content;
    if (this.state.isLoading) {
      content = <h1>Loading...</h1>
    } else if (this.state.users.length > 0) {
      content = this.state.users.map(u =>
          <Link to={`/users/${u._id}`}>
            <User key={u._id} user={u} />
          </Link>
          )
    } else {
      content = <h4>No users found!</h4>
    }
    return (
        <Router>
          <div>
            <Route path="/users/:_id" component={UserPage}/>
            <Route exact={true} path="/" render={() => content}/>
          </div>
        </Router>
    )
  }
}

export default App;

user.js

import React from 'react'

function User(props) {
    const {title, details, date} = props.user;
    return (
        <div>
            <p>Name: {title}</p>
            <p>Email Address: {details}</p>
            <p>Email Address: {date}</p>
            <hr className='banner-text hr' />
        </div>
    )
}

export default User

UserPage.js

import React, {Component} from 'react'

class UserPage extends Component{
    constructor(props) {
        super(props)
        this.state = {
            isLoading: false,
            data: '',
            id: this.props.match.params._id
        }
    }
    componentDidMount() {
        this.setState({ isLoading: true })
        fetch(`https://your/api/url/for/user/${this.state.id}`)
            .then(response => response.json())
            .then(response => {
                this.setState({
                    data: response,
                    isLoading: false
                })
            })
    }

    render() {
        return (
            this.state.isLoading ?
                (<h1>Loading page of user {this.state.id}...</h1>)
                :
                (
                    <div>
                        <p>{this.state.data}</p>
                    </div>
                )
    )
    }
}

export default UserPage