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

这里是一个示例项目，演示了如何一起使用react和react-router。

我们首先从某个api获取用户列表，然后将其显示为列表。使用react-router，我们为每个项目添加一个链接，以便在单击该项目时，页面URL会更改

但页面无法重新加载！这些是内部链接

然后再次使用react-router，我们根据URL显示不同的内容。最后，我们有了一个UserPage组件，该组件在挂载后将获取特定用户页面的数据并进行呈现。

希望这很清楚

这是非常好的tutorial on react-router

这是official react tutorial

强烈建议您看看他们

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

当用户单击每个列表项时，获取并显示新内容[React]

1 个答案: