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

【问题标题】：Fetch and display new contents when user click on each list item [React]当用户单击每个列表项 [React] 时获取并显示新内容
【发布时间】：2019-03-13 16:22:04
【问题描述】：

首先，我想从我的服务器加载一个 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>
    );
}
}

【问题讨论】：

嗨 Moshe，欢迎来到 StackOverflow！您是否尝试过使用 For 循环？
你的问题到底是什么？
@Amir 当我点击 is 时，如何为每个 Json 对象添加一个单独的页面
react 的整体思想是将渲染（视图）与数据（模型）分离。因此，基于此理念，您可以创建一个组件，该组件在其props 中获取一个对象并呈现其页面。然后，您可以使用onClick 事件（在列表项上或显示对象的任何位置）并呈现该特定页面来代替当前页面。你甚至可以使用 react-router 重定向到本地路由
@Moshe 让我看看我是否理解您的问题：您想首先从某个地方加载一个包含对象列表的 json。然后，您需要将这些对象呈现为列表（如您所说，如博客条目）。然后，您希望单击这些对象中的每一个，将您重定向到显示有关该单击对象的信息的页面。而这些信息也来自一个 api 调用（远程服务器）。这是你的问题吗？

标签： javascript json reactjs react-router

【解决方案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

【讨论】：