如何应用加载更多按钮在React中推送this.state

Question

实现<a className="button" onClick={this.loadMore}>Load more news</a>按钮的目的是使用API​​获取更多对象并在不刷新页面的情况下显示。仍然不确定实现setState方法的方法是否理想

this.setState({
  newsData: [...this.state.newsData, ...responseJson]
}) 

App.js

import React from 'react';
import { Newslist } from './newslist/Newslist';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      page: 1,
      newsData: ''
    }
  }
  componentDidMount() {
    this.page = 1;
    this.requestNews();
  }

  requestNews () {
    console.log('koooy');
    fetch('http://localhost:3000/api/?page='+this.page)
    .then((response) => response.json())
    .then((responseJson) => {
        this.setState({
          newsData: [...this.state.newsData, ...responseJson]
        })
    })
    .catch((error) => {
      console.error(error);
    });
  }

  loadMore = () => {
    this.requestNews();
  }

  render() {
    return (
      <main className="main">
        <h1>Hello mate !</h1>
        <Paggination />
        { this.state.newsData.length
          ? <Newslist currentNews={this.state.newsData} loadMoreData={this.loadMore} />
          : <p>Loading...</p>
        }
      </main>
    );
  }
}

export default App;

Newslist.js

import React from 'react';

export class Newslist extends React.Component {
  loadMore = () => {
    event.preventDefault();
    this.props.loadMoreData();
  }

  render () {
    const newsInList = this.props.currentNews.map(newsDetails => {
      return (
        <section className="media" key={newsDetails.id}>
          {newsDetails.image && <figure className="media-figure">
             <img src={newsDetails.image} />
          </figure>}
          <div className="media-body">
            <h3 className="media-title">{newsDetails.header}</h3>
            <p>{newsDetails.content}</p>
          </div>
        </section>
      );
    });

    return (
      <div>
        {newsInList}
        <a className="button" onClick={this.loadMore}>Load more news</a>
      </div>
    );
  }
}

Answer 1

你所做的似乎是合理的。基本上，请确保您知道您当前的新闻页面/偏移量。当您发出API请求时，请使用请求发送页面/偏移量，并将新用法附加到数组的头部或尾部。

我注意到有关使用Redux的建议，Redux相当复杂，这是一个非常简单的问题，这里不需要它。