查看时数据从页面上消失 [英] Data disappears from the page when viewed

问题描述

当我想查看它们时，我有一个寄存器列表，当我向下滚动页面并到达末尾之前，它们会在超过 20 个时消失，然后消失.在这种情况下，控制台中只会出现一个错误.

查看寄存器时在浏览器控制台中出现的错误.

这通常意味着您在未安装的组件上调用了 setState().这是一个无操作.请检查 RegistersList 组件的代码.

<小时>

list.js

import React, { Component, PropTypes } from 'react';从'react-redux'导入{连接}从反应路由器"导入{链接}；import * as utils from '../../utils';从时刻"导入时刻；从redux"导入 { bindActionCreators }从 'react-infinite-scroller' 导入 InfiniteScroll；import { index as fetchRegisters } from '../../actions/registers';变量页 = 0@连接(状态 =>({currentFeatures: state.features,寄存器:state.registers.items}),调度 =>({动作:bindActionCreators({fetchRegisters}， 派遣)}))导出默认类 RegistersList 扩展组件 {静态 propTypes = {寄存器:PropTypes.array.isRequired，文章:PropTypes.array.isRequired，交易对手:PropTypes.array.isRequired，handleDestroy: PropTypes.func.isRequired};构造函数(道具){超级(道具)；this.state = { hasMoreItems: true };}componentWillReceiveProps(newProps) {const { 道具 } = 这个if (props.current !== newProps.current) {this.setState({ hasMoreItems: true })页 = 0}}componentWillMount() {页 = 0}fetchRegistersOnScroll() {const { 动作，当前，调度 } = this.props页面++actions.fetchRegisters(当前，页面).then(res => {dispatch({ type: 'REGISTER/SCROLL', payload: res.data });如果(res.data.items.length <20)this.setState({ hasMoreItems: false })})}使成为() {const { 注册、文章、交易对手、handleDestroy、currentFeatures } = this.props;const registersList = registers.map((register, i) => {const article = articles.find(a => a.id === register.article_id) ||{}const typeName = article.type == "成本" ?'成本':'收入'；const 交易对手 = 交易对手.find(c => c.id === register.counterparty_id) ||{}const 客户端 = 交易对手.find(c => c.id === register.client_id) ||{}const manager = 交易对手.find(c => c.id === register.sales_manager_id) ||{}返回(<tr className="register-table" key={i}><td>{ moment(register.date).format("DD-MM-YYYY") }</td><td>{文章.title}<span className={`register-title-label ${typeName}`}>&nbsp;({typeName})</span></td>{ (currentFeatures && currentFeatures.sales) ?<td>{client.name }</td>: 空值 }{ (currentFeatures && currentFeatures.sales) ?<td>{ manager.name }</td>: 空值 }<td>{交易对手?交易对手名称:'-'}</td><td>{register.value}</td><td><div className="register-note">{register.note}</div></td><td><div className="btn-group btns-hidden" ><链接to={`/registers/${register.id}/edit`}className="btn btn-primary btn-sm"><i className="glyphicon glyphicon-pencil"></i></链接><按钮className="btn btn-sm btn-danger"onClick={handleDestroy.bind(this, register.id)}><i class="fa fa-times" aria-hidden="true"></i>

</td></tr>)})如果(寄存器.长度){返回 (<无限卷轴页面开始={0}loadMore={this.fetchRegistersOnScroll.bind(this)}hasMore={this.state.hasMoreItems}loader={<tr className="loader" key={0}><td><b>加载中...</b></td></tr>}元素={'tbody'}>{寄存器列表}</InfiniteScroll>)}返回(<tr><td rowSpan="6">没有寄存器...</td></tr></tbody>);}}

<小时>

registers.js

从'axios'导入axios；从'react-cookie'导入cookie；const API_URL = `${window.location.origin}/api/v1/registers`;导出函数索引(参数，页面){返回函数(调度，getState){返回新的承诺((解决，拒绝)=> {让标题 = {}headers['Authorization'] = `Bearer ${cookie.load('token')}`headers['workspace-id'] = getState().workspaces.app.current.idparams.page = 页面axios.get(API_URL, { params, headers }).then(res => {dispatch({ type: 'REGISTER/FETCH', payload: res.data });解决(资源)}).catch(e => {console.error("错误:", e);拒绝(e)})})}}导出函数显示(id){返回函数(调度，getState){返回新的承诺((解决，拒绝)=> {让标题 = {}headers['Authorization'] = `Bearer ${cookie.load('token')}`headers['workspace-id'] = getState().workspaces.app.current.idaxios.get(`${API_URL}/${id}`, { headers: headers }).then(res => {dispatch({ type: 'REGISTER/SHOW', payload: res.data });解决(资源)}).catch(e => {console.error("错误:", e);拒绝(e)})})}}导出函数创建(注册){返回函数(调度，getState){返回新的承诺((解决，拒绝)=> {让标题 = {}headers['Authorization'] = `Bearer ${cookie.load('token')}`headers['workspace-id'] = getState().workspaces.app.current.id让身体 = {注册:注册}axios.post(API_URL, body, { headers: headers }).then(res => {dispatch({ type: 'REGISTER/CREATE', payload: res.data });解决(资源)}).catch(e => {控制台错误(e)；拒绝(e)})})}}导出函数更新(注册){返回函数(调度，getState){返回新的承诺((解决，拒绝)=> {让标题 = {}headers['Authorization'] = `Bearer ${cookie.load('token')}`headers['workspace-id'] = getState().workspaces.app.current.id让正文 = {注册:注册.注册}axios.patch(`${API_URL}/${register.id}`, body, { headers: headers }).then(res => {解决(资源)}).catch(e => {console.error("错误:", e);拒绝(e)})})}}导出函数销毁(id){返回函数(调度，getState){返回新的承诺((解决，拒绝)=> {让标题 = {}headers['Authorization'] = `Bearer ${cookie.load('token')}`headers['workspace-id'] = getState().workspaces.app.current.idaxios.delete(`${API_URL}/${id}`, { headers: headers }).then(res => {dispatch({ type: 'REGISTER/DELETE', payload: id });解决(资源)}).catch(id => {console.error("error", id);拒绝(ID)})})}}

解决方案

按照您的意见，您已经解决了数据从页面中消失的问题，但现在您有数据重复，可以通过修改 fetchRegisterOnScroll 函数来解决.由于 InfiniteScroll 可能会一次又一次地调用 loadMore 函数，所以我们需要检查它是否被调用.

以下是可能有帮助的代码片段.

fetchRegistersOnScroll() {如果(this.state.isFetching)返回；//检查请求是否已经被调用.const { 动作，当前，调度 } = this.propsthis.setState({ isFetching: true });actions.fetchRegisters(当前，页面).then(res => {dispatch({ type: 'REGISTER/SCROLL', payload: res.data });如果(res.data.items.length <20)this.setState({ hasMoreItems: false, isFetching: false })否则 this.setState({ isFetching: true })})}

我认为这会有所帮助.谢谢！！

I have a list of registers when I want to see them, they disappear when there are more than 20 of them before I scroll down the page and reach the end, after which they disappear. In this case, only one error appears in the console.

An error that appears in the browser console when viewing registers.

This usually means you called setState() on an unmounted component. 
This is a no-op. Please check the code for the RegistersList component.

---

list.js

import React, { Component, PropTypes } from 'react';
import { connect }                     from 'react-redux'
import { Link }                        from 'react-router';
import * as utils                      from '../../utils';
import moment                          from 'moment';
import { bindActionCreators }          from 'redux'
import InfiniteScroll                  from 'react-infinite-scroller';
import { index as fetchRegisters }     from '../../actions/registers';

var page = 0

@connect(
  state => ({
    currentFeatures: state.features,
    registers: state.registers.items
  }),
  dispatch => ({
    actions: bindActionCreators({
      fetchRegisters
    }, dispatch)
  })
)
export default class RegistersList extends Component {
  static propTypes = {
    registers: PropTypes.array.isRequired,
    articles: PropTypes.array.isRequired,
    counterparties: PropTypes.array.isRequired,
    handleDestroy: PropTypes.func.isRequired
  };

  constructor(props) {
    super(props);
    this.state = { hasMoreItems: true };
  }

  componentWillReceiveProps(newProps) {
    const { props } = this

    if (props.current !== newProps.current) {
      this.setState({ hasMoreItems: true })
      page = 0
    }
  }

  componentWillMount() {
    page = 0
  }

  fetchRegistersOnScroll() {
    const { actions, current, dispatch } = this.props
    page++

    actions.fetchRegisters(current, page)
      .then(res => {
        dispatch({ type: 'REGISTER/SCROLL', payload: res.data });

        if (res.data.items.length < 20)
          this.setState({ hasMoreItems: false })
      })
  }

  render() {
    const { registers, articles, counterparties, handleDestroy, currentFeatures } = this.props;

    const registersList = registers.map((register, i) => {
      const article = articles.find(a => a.id === register.article_id) || {}
      const typeName = article.type == "Cost" ? 'cost' : 'revenue';
      const counterparty = counterparties.find(c => c.id === register.counterparty_id) || {}
      const client = counterparties.find(c => c.id === register.client_id) || {}
      const manager = counterparties.find(c => c.id === register.sales_manager_id) || {}

      return(
        <tr className="register-table" key={i}>
          <td>{ moment(register.date).format("DD-MM-YYYY") }</td>
          <td>
            {article.title}
            <span className={`register-title-label ${typeName}`}>
              &nbsp;({typeName})
            </span>
          </td>

          { (currentFeatures && currentFeatures.sales) ?
            <td>{ client.name }</td>
          : null }

          { (currentFeatures && currentFeatures.sales) ?
            <td>{ manager.name }</td>
          : null }

          <td>{counterparty ? counterparty.name : '-'}</td>
          <td>{register.value}</td>
          <td><div className="register-note">{register.note}</div></td>
          <td>
            <div className="btn-group btns-hidden" >
               <Link
                  to={`/registers/${register.id}/edit`}
                  className="btn btn-primary btn-sm"
                >
                  <i className="glyphicon glyphicon-pencil"></i>
              </Link>
              <button
                className="btn btn-sm btn-danger"
                onClick={handleDestroy.bind(this, register.id)}
              >
                <i class="fa fa-times" aria-hidden="true"></i>
              </button>
            </div>
          </td>
        </tr>
      )
    })

    if (registers.length) {
      return (
        <InfiniteScroll
          pageStart={0}
          loadMore={this.fetchRegistersOnScroll.bind(this)}
          hasMore={this.state.hasMoreItems}
          loader={<tr className="loader" key={0}><td><b>Loading ...</b></td></tr>}
          element={'tbody'}
        >
          { registersList }
        </InfiniteScroll>
      )
    }

    return(
      <tbody>
        <tr>
          <td rowSpan="6">
            There are no registers...
          </td>
        </tr>
      </tbody>
    );
  }
}

---

registers.js

import axios from 'axios';
import cookie from 'react-cookie';

const API_URL = `${window.location.origin}/api/v1/registers`;

export function index(params, page) {
  return function(dispatch, getState) {
    return new Promise((resolve, reject) => {
      let headers = {}
      headers['Authorization'] = `Bearer ${cookie.load('token')}`
      headers['workspace-id'] = getState().workspaces.app.current.id
      params.page = page

      axios.get(API_URL, { params, headers })
        .then(res => {
          dispatch({ type: 'REGISTER/FETCH', payload: res.data });
          resolve(res)
        })
        .catch(e => {
          console.error("error: ", e);
          reject(e)
        })
    })
  }
}

export function show(id){
  return function(dispatch, getState) {
    return new Promise((resolve, reject) => {
      let headers = {}
      headers['Authorization'] = `Bearer ${cookie.load('token')}`
      headers['workspace-id'] = getState().workspaces.app.current.id

      axios.get(`${API_URL}/${id}`, { headers: headers })
        .then(res => {
          dispatch({ type: 'REGISTER/SHOW', payload: res.data });
          resolve(res)
        })
        .catch(e => {
          console.error("error: ", e);
          reject(e)
        })
    })
  }
}

export function create(register){
  return function(dispatch, getState) {
    return new Promise((resolve, reject) => {
      let headers = {}
      headers['Authorization'] = `Bearer ${cookie.load('token')}`
      headers['workspace-id'] = getState().workspaces.app.current.id
      let body = {register: register}

      axios.post(API_URL, body, { headers: headers })
        .then(res => {
          dispatch({ type: 'REGISTER/CREATE', payload: res.data });
          resolve(res)
        })
        .catch(e => {
          console.error(e);
          reject(e)
        })
    })
  }
}

export function update(register){
  return function(dispatch, getState) {
    return new Promise((resolve, reject) => {
      let headers = {}
      headers['Authorization'] = `Bearer ${cookie.load('token')}`
      headers['workspace-id'] = getState().workspaces.app.current.id
      let body = {register: register.register}

      axios.patch(`${API_URL}/${register.id}`, body, { headers: headers })
        .then(res => {
          resolve(res)
        })
        .catch(e => {
          console.error("error: ", e);
          reject(e)
        })
    })
  }
}

export function destroy(id){
  return function(dispatch, getState) {
    return new Promise((resolve, reject) => {
      let headers = {}
      headers['Authorization'] = `Bearer ${cookie.load('token')}`
      headers['workspace-id'] = getState().workspaces.app.current.id

      axios.delete(`${API_URL}/${id}`, { headers: headers })
        .then(res => {
          dispatch({ type: 'REGISTER/DELETE', payload: id });
          resolve(res)
        })
        .catch(id => {
          console.error("error", id);
          reject(id)
        })
    })
  }
}

解决方案

Following your comments, you already solved the data disappears from the page but now you have data duplicacy which can be solved by modifying the fetchRegisterOnScroll Function. As InfiniteScroll may call loadMore function again and again so we need to check that is it being called or not.

Below is the code snippet which might help.

fetchRegistersOnScroll() {
    if (this.state.isFetching) return;         // checking request has already been called or not.
    const { actions, current, dispatch } = this.props

    this.setState({ isFetching: true });
    actions.fetchRegisters(current, page)
      .then(res => {
        dispatch({ type: 'REGISTER/SCROLL', payload: res.data });

        if (res.data.items.length < 20)
          this.setState({ hasMoreItems: false, isFetching: false })
        else this.setState({ isFetching: true })
      })
  }

I think it will help. Thanks!!

这篇关于查看时数据从页面上消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！