Question

我要动态加载的数据库中有 10条记录。该应用程序使用react redux从数据库加载数据。加载更多按钮也可以使用。

这是我的问题，

每次我点击“加载更多”按钮时，它将从数据库将替换已经显示的记录。我认为我的问题在于import React from "react"; import { Link } from "react-router-dom"; import { connect } from "react-redux"; import { userActions } from "../_actions"; class HomePage extends React.Component { constructor(props) { super(props); this.state = { row_pass: 0 }; this.row = 0; this.rowperpage = 2; this.buttonText = "Load More"; this.loadMore = this.loadMore.bind(this); } componentDidMount() { this.props.dispatch(userActions.getAll(this.row)); } loadMore() { this.row += this.rowperpage; alert("loading" + this.row); this.props.dispatch(userActions.getAll(this.row)); this.buttonText = "Load More"; } get finished() { if (this.row >= this.rowperpage) { return <li key={"done"}>No More Message to Load.</li>; } return null; } render() { const { user, users } = this.props; return ( <div style={{ background: "red" }} className="well col-md-6 col-md-offset-3" > <h1> Hi{user.message}! {user.token} </h1> <p>You're logged in with React!!</p> <h3>All registered users:</h3> {users.loading && <em>Loading users...</em>} {users.error && ( <span className="text-danger">ERROR: {users.error}</span> )} {users.items && ( <ul> {users.items.map((user, index) => ( <li key={user.id}> {user.firstName + " " + user.lastName}: <span> {" "} - <a>home</a> </span> </li> ))} {this.finished} </ul> )} <p> <a className="pic" onClick={this.loadMore}> {this.buttonText} </a> <input type="text" className="form-control" name="this.row" id="this.row" value={this.row} onChange={this.handleChange} /> </p> </div> ); } } function mapStateToProps(state) { const { users, authentication } = state; const { user } = authentication; return { user, users }; } const connectedHomePage = connect(mapStateToProps)(HomePage); export { connectedHomePage as HomePage };函数

1。）每次单击loadmore按钮时，如何将新记录追加到已显示的记录中。

2.）Am还检查显示一条消息，数据完成后不再记录，但无法使其像消息一样正常工作每次点击 loadmore 按钮都会显示

function getAll(row) {
    return dispatch => {
        dispatch(request(row));

        userService.getAll(row)
            .then(
                users => dispatch(success(users)),
                error => dispatch(failure(error.toString()))
            );
    };

这是 user.action.js

import { userConstants } from '../_constants';

export function users(state = {}, action) {
  switch (action.type) {
    case userConstants.GETALL_REQUEST:
      return {
        loading: true
      };
    case userConstants.GETALL_SUCCESS:
      return {
        items: action.users
      };

    case userConstants.GETALL_FAILURE:
      return { 
        error: action.error
      };



/*


    case userConstants.DELETE_FAILURE:
      // remove 'deleting:true' property and add 'deleteError:[error]' property to user 
      return {
        ...state,
        items: state.items.map(user => {
          if (user.id === action.id) {
            // make copy of user without 'deleting:true' property
            const { deleting, ...userCopy } = user;
            // return copy of user with 'deleteError:[error]' property
            return { ...userCopy, deleteError: action.error };
          }

          return user;
        })
      };
*/
    default:
      return state
  }
}

user.reducer.js 代码

(100,100,2)

Answer 1

如果我理解正确，这就是您需要做的。首先，请勿将整个items替换为action.users。将其与旧的items状态联系起来：

case userConstants.GETALL_REQUEST:
  return {
    ...state,
    loading: true
  };
case userConstants.GETALL_SUCCESS:
  return {
    loading: false,
    error: null,
    items: [ ...(state.items || []), ...action.users ]
  };

从此处开始，要正确显示"No More Message to Load"，您需要修复this.finished条件：

get finished() {
  if (this.row >= 10) {
     return (<li key={'done'}>No More Message to Load.</li>);
  }
  return null;
}

其中10是用户总数，而不是this.rowperpage。理想情况下，该值应来自API响应。

希望这会有所帮助。

更新

要显示正确的buttonText，我建议将您当前的实现替换为：

get buttonText() {
  if (this.props.users.loading) return 'Loading...';
  if (this.props.users.error) return 'Error has occurred :(';
  return 'Load more'
}

如何使用reactjs redux将新记录追加到已显示的记录

1 个答案: