我正在为别人编写代码。
我们正在根据用户的滚动方式从数据库加载内容。当用户滚动时，数据一直保持加载状态，直到从数据库中检索到所有数据为止。客户端希望查看正在加载数据的段号。
要在URL中显示数字，以前的开发人员已使用window.location.hash()，但是由于这个原因，当用户单击后退按钮时，我们无法将其带到上一页。相反，它会继续在页面上跳转几次，然后返回。
我不明白我还需要做什么来解决它。下面是代码：
import React, { Component } from 'react';
import ComponentView from './view';
import axios from 'axios';
import { connect } from 'react-redux';
import { HashLink as Link } from 'react-router-hash-link';
import { createAction,ActionNames } from '../../redux/actions/index';
/**
* @name Product Grid Component
* @type Component
* @author Inderdeep Singh
*/
class Main extends Component {
/**
* Constructor
* @param props
*/
state = {
items: [],
isLoading: true,
cursor: 0
}
constructor(props){
super(props);
this.pageSize = 10;
this.state = {
data:[],
link:'',
loading:true,
items: [],
isLoading: false,
loadAll:false,
cursor: 0,
arrSize: 12,
productsLen:0,
section:0,
scrollUp:0,
url:'',
sectionSize:'',
sectionSizeLim:1
}
// if(props.query){
// this.getProducts();
// }
this.handleOnScroll = this.handleOnScroll.bind(this);
}
componentWillMount() {
// this.loadMore()
// console.log(this.props);
}
componentWillUnmount() {
window.removeEventListener('scroll', this.handleOnScroll);
}
/**
* Component Did Mount
*/
componentDidMount(){
var url = window.location.href;
this.setState({url:url})
if(url.indexOf('#')>-1){
if(url.indexOf('kategori')>-1){
url = url.split('/');
var pageNum = url[6];
var catName = url[4];
var timesRun = 0;
var Scrolling = setInterval(function () {
timesRun += 1;
if(timesRun <= pageNum){
window.scrollTo(0, pageNum * 1930);
var fact ='/kategori/'+catName+'/#/page/'+timesRun;
window.location.hash = "/"+ss;
// history.pushState(null,null,fact);
}
else{
clearInterval(Scrolling)
}
},1000);
}
else if(url.indexOf('produkt')>-1){
url = url.split('/');
var pageNum = url[6];
var catName = url[4];
var timesRun = 0;
var Scrolling = setInterval(function () {
timesRun += 1;
if(timesRun <= pageNum){
window.scrollTo(0, pageNum * 1930);
var fact ='/produkt/'+catName+'/#/page/'+timesRun;
window.location.hash = "/"+ss;
// history.pushState(null,null,fact);
}
else{
clearInterval(Scrolling)
}
},1000);
}
else{
url = url.split('#');
url = url[1].split('/');
url = url[2];
var timesRun = 0;
var Scrolling = setInterval(function () {
timesRun += 1;
if(timesRun <= url){
window.scrollTo(0, url * 1930);
// history.pushState(null,null,'/#/page/'+timesRun);
window.location.hash = "/"+ss;
}
else{
clearInterval(Scrolling)
}
},1000);
}
}
const {emitter} = this.props;
emitter.addListener("REFRESH_PRODUCTS",(query)=>{
this.getProducts(1,query)
})
this.setState({data:this.props.data})
// this.loadMore()
window.addEventListener('scroll', this.handleOnScroll);
this.doQuery();
}
componentWillReceiveProps(newProps){
if(JSON.stringify(this.props.query)!=JSON.stringify(newProps.query)){
this.getProducts(1,newProps.query)
}
// console.log(this.state.arrSize);
}
// scrollIt=() => { window.scrollTo(0, 1000)}
doQuery = () => {
this.setState({ isLoading: true, error: undefined })
axios.post('/getProducts')
.then((res) => {
// console.log(parseInt(res.data.results.length/12))
this.setState({
// items: [...state.items, ...res.items],
// cursor: res.cursor,
// isLoading: false
// newData: this.state.newData.slice().concat(res.data)
// newData: this.state.olddata.concat(res.data.results)
productsLen:res.data.results.length,
sectionSize:parseInt(res.data.results.length/12)
});
})
}
handleOnScroll() {
var self = this;
function callURL(ss){
// var self = this;
var url = window.location.href;
setTimeout(
self.setState({
arrSize: self.state.arrSize + 12,
isLoading: true
}), 3000);
var url = window.location.href;
if(self.state.sectionSizeLim<=self.state.sectionSize){
self.setState({
sectionSizeLim: self.state.sectionSizeLim + 1,
})
}
if (self.state.arrSize <= self.props.product_list.length) {
var sect = self.state.section;
if (url.indexOf('#') > -1) {
url = url.split('#');
url = url[1].split('/');
url = url[2];
if (sect <= url) {
sect = sect + 1;
}
}
else {
sect = sect + 1;
}
self.setState({
isLoading: true,
section: sect
})
}
else {
self.setState({
isLoading: false,
loadAll: true
})
}
if(ss==0){
if (self.state.url.indexOf('kategori') > -1) {
var url = self.state.url.split('/');
var fact = '/kategori/' + url[4] ;
// history.pushState(null, null, fact);
window.location.hash = "/"+ss;
// window.location.hash = '';
// window.location.href.split('#')[0];
// window.history.pushState("object or string", "Title", fact,"/");
}
else if (self.state.url.indexOf('produkt') > -1) {
var url = self.state.url.split('/');
var fact = '/produkt/' + url[4] ;
// history.pushState(null, null, fact);
window.location.hash = "/"+ss;
// window.location.hash = '';
// window.location.href.split('#')[0];
// window.history.pushState("object or string", "Title", fact,"/");
}
else {
// history.pushState(null, null, '/');
var fact = '/' + ss ;
window.location.hash = "/"+ss;
// window.history.pushState("object or string", "Title", "/");
}
}
else{
if (self.state.url.indexOf('kategori') > -1) {
var url = self.state.url.split('/');
var fact = '/kategori/' + url[4] + '/page/' + ss;
// history.pushState(null, null, fact);
// window.location.hash = fact;
window.location.hash = "/"+ss;
}
else if (self.state.url.indexOf('produkt') > -1) {
var url = self.state.url.split('/');
var fact = '/produkt/' + url[4] + '/page/' + ss;
// history.pushState(null, null, fact);
// window.location.hash = fact;
window.location.hash = "/"+ss;
}
else {
// history.pushState(null, null, '/#/page/' + ss);
window.location.hash = "/"+ss;
}
}
}
var h = ($("html").scrollTop());
if(h == 0 ){
callURL(0);
}
else if(h >= 0 && h <= 1930){
callURL(0);
}
else if (h >= 1930 && h <= 3860) {
callURL(1)
}
else if (h >= 3860 && h <= 5790) {
callURL(2)
}
else if (h >= 5790 && h <= 7720) {
callURL(3)
}
else if (h >= 7720 && h <= 9650) {
callURL(4)
}
else if (h >= 9650 && h <= 11580) {
callURL(5)
}
else if (h >= 11580 && h <= 13510) {
callURL(6)
}
else if (h >= 13510 && h <= 15440) {
callURL(7)
}
else if (h >= 15440 && h <= 17370) {
callURL(8)
}
else if (h >= 17370 && h <= 19300) {
callURL(9)
}
else if (h >= 19300 && h <= 21230) {
callURL(10)
}
else if (h >= 21230 && h <= 23160) {
callURL(11)
}
else if (h >= 23160 && h <= 25090) {
callURL(12)
}
else if (h >= 25090 && h <= 27020) {
callURL(13)
}
else if (h >= 27020 && h <= 28950) {
callURL(14)
}
else if (h >= 28950 && h <= 30880) {
callURL(15)
}
else if (h >= 30880 && h <= 32810) {
callURL(16)
}
else if (h >= 32810 && h <= 34740) {
callURL(17)
}
else if (h >= 34740 && h <= 36670) {
callURL(18)
}
else if (h >= 36670 && h <= 38600) {
callURL(19)
}
else if (h >= 38600 && h <= 40530) {
callURL(20)
}
else if (h >= 40530 && h <= 42460) {
callURL(21)
}
else if (h >= 42460 && h <= 44390) {
callURL(22)
}
else if (h >= 44390 && h <= 46320) {
callURL(23)
}
else if (h >= 46320 && h <= 48250) {
callURL(24)
}
else if (h >= 48250 && h <= 50180) {
callURL(25)
}
else if (h >= 50180 && h <= 52110) {
callURL(26)
}
else if (h >= 52110 && h <= 54040) {
callURL(27)
}
else if (h >= 54040 && h <= 55970) {
callURL(28)
}
else if (h >= 55970 && h <= 57900) {
callURL(29)
}
else if (h >= 57900 && h <= 59830) {
callURL(30)
}
else if (h >= 59830 && h <= 61760) {
callURL(31)
}
else{
console.log(h);
}
var scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
var scrollHeight = (document.documentElement && document.documentElement.scrollHeight) || document.body.scrollHeight;
var scrollHeights = (document.documentElement && document.documentElement.scrollHeight) || document.body.scrollHeight;
scrollHeight = scrollHeight - 1000;
var clientHeight = document.documentElement.clientHeight || window.innerHeight;
var scrolledToBottom = Math.ceil(scrollTop + clientHeight) >= scrollHeight;
var scrollToTop = Math.ceil(scrollTop - clientHeight) >= scrollHeight;
}
/**
* Get products
* @param page
*/
getProducts(page,customQuery){
page = page || 1;
// console.log(page);
const {getProducts,query} = this.props;
let obj = {
...query,
...customQuery,
query : {
...(query || {}).query,
...(customQuery || {}).query
},
// limit : this.pageSize,
limit : 5000,
// skip : (page-1)*this.pageSize
skip : 0
};
obj.query = {
...obj.query,
state : 'published'
}
getProducts(obj).then(action=>{
// // if(page>1){
// document.getElementById('product-grid').scrollIntoView();
// // }
})
}
/**
* Render the view
* @returns {*}
*/
render() {
return (ComponentView.bind(this))();
}
}
/**
* Bind Actions
* @param dispatch
* @returns Object
*/
function bindAction(dispatch) {
return {
getProducts : (data)=>{
return dispatch(createAction(ActionNames.GET_PRODUCTS,data));
}
};
}
/**
* Map the shared state to properties
* @param state
* @returns Object
*/
const mapStateToProps = state => {
// console.log(state)
return {
data: state.products.results || [],
count : state.products.count,
hasMore : state.products.hasMore,
emitter : state.emitter
};
};
//Set display name to be used in React Dev Tools
Main.displayName = 'Product Grid';
export default connect(mapStateToProps,bindAction)(Main);
这是我们遇到问题的站点。 https://www.tagminepenge.dk/
转到某个页面并向下滚动，然后尝试单击浏览器的后退按钮。您将了解该问题。
谢谢。
答案 0 :(得分：0)
之所以发生这种情况，是因为每次您调用window.location时，都会在浏览器历史记录堆栈中推送一个新的URL。为了解决这个问题，请使用react路由器提供的 history.replace ，它将替换历史记录堆栈中的当前url，因此当您返回时要提出同样的问题。 history
import React, {Component} from 'react';
export default class Logout extends Component {
constructor(props) {
super(props);
}
Logout = () => {
this.props.history.replace('/');
}
render() {
return (
<div>
<h1>Your Links</h1>
<button onClick={this.Logout}>Logout</button>
</div>
);
}
}