加载更多按钮与Reactjs无法正常工作

请问我有问题。下面的代码使用加载更多按钮来显示记录。我将限制设置为2.问题是它显示前2条记录，在下一次点击时，它显示剩余的6条记录，而不是以用户点击为基础的限制显示在两个（2）中。有人可以帮我解决这个问题。加载更多按钮与Reactjs无法正常工作

<!DOCTYPE html> 
<html> 
    <head> 

    </head> 
    <body> 


<style> 

.pic{ 
background:blue; color:white;} 
</style> 


<script src="build/react.min.js"></script> 
<script src="build/react-dom.min.js"></script> 
<script src="build/browser.min.js"></script> 
<script src="build/jquery.min.js"></script> 

<div id="app"></div> 

<script type="text/babel"> 




class Application extends React.Component { 
constructor(props) { 
    super(props) 

    this.state = {rec : [ 
    { "name" : "Tony", "Age" : "18"}, 
    { "name" : "John", "Age" : "21" }, 
    { "name" : "Luke", "Age" : "78" }, 
    { "name" : "Mark", "Age" : "90" }, 
    { "name" : "Jame", "Age" : "87" }, 
    { "name" : "Franco", "Age" : "34" }, 
    { "name" : "Biggard", "Age" : "19" }, 
    { "name" : "tom", "Age" : "89" }, 
    ],  
    limit : 2}; 
    this.loadMore = this.loadMore.bind(this); 
} 

loadMore() { 
    let recLength = this.state.rec.length; 
    this.setState({limit:recLength}); 
    // show more entries 
    // switch to "show less" 
} 
render() { 
    return <div className="container"> 

    <div> 
     <h3>List of Records</h3> 
     <ul> 
     {this.state.rec.slice(0,this.state.limit).map((obj, i) => 
<li key={i}>{obj.name} - {obj.Age}</li> 
)} 
     </ul> 
    </div> 
    <p> 
     <a className="pic" onClick={this.loadMore}>Load more Button</a>. 
<br /> 
//display image spinner as user clicks on load more button 
    </p> 
    </div>; 
} 
} 

ReactDOM.render(<Application />, document.getElementById('app')); 


</script> 

    </body> 
</html>

来源

2017-10-16 briandenny

-1

这是基于您的代码的预期行为。当您单击loadMore时，您将重新分配限制为this.state.rec数组的长度。在这种情况下，长度将始终为8.因此它只会显示整个数组。如果你想增加列表只有2，直到限制，我会这样做。

loadMore() { 
    const recLength = this.state.rec.length; 
    const currentLimit = this.state.limit; 
    if (currentLimit < recLength) { 
     this.setState({ limit: currentLimit + 2 }); 
    } 
} 

get doneMessage() { 
    if (this.state.limit >= this.state.rec.length) { 
     return (<li key={'done'}>All messages loaded.</li>); 
    } 
    return null; 
} 

render() { 
    return <div className="container"> 

    <div> 
     <h3>List of Records</h3> 
     <ul> 
     {this.state.rec.slice(0,this.state.limit).map((obj, i) => 
      <li key={i}>{obj.name} - {obj.Age}</li> 
     )} 
     {this.doneMessage} 
     </ul> 
    </div> 
    <p> 
     <a className="pic" onClick={this.loadMore}> 
     Load more Button 
     </a> 
    </p> 
    </div>; 
} 
}

轻微的纠正，忘了切片不会超出你的范围（大声笑的JavaScript）。我还添加了一些关于如何可能显示不再有消息对话的代码。

至于显示图像微调，这不能真正适用于这种情况。你的负载在这里是瞬间的。如果它正在进行某种大型操作或网络访问，我会建议使用一个，否则它是毫无意义的。如果您确实添加了一个，则完成的操作与完成的消息类似。

来源

2017-10-16 19:01:04

您不必担心限制大于'rec.length'。它会给出一个超出范围的索引，因此它只会返回所有索引（这将是数组中的所有内容）。 –

@Ramzi C.你的解决方案是好的，但如果没有更多的记录显示，我如何打印消息“没有更多的记录加载”。我可以在用户点击加载更多按钮时显示加载图像。谢谢 – briandenny

为您的评论添加了一些更改。 –

在你loadMore方法，你将限制设置为记录的长度：

let recLength = this.state.rec.length; 
this.setState({limit:recLength});

当你第一次得到的记录，你正在做一个slice获得第2（因为this.state.limit是2）。但在此之后，当你点击该按钮，限制设置为记录（8）量，这意味着它会得到所有8

来源

2017-10-16 18:58:03

的loadMore功能应当由2每次递增this.state.limit：

loadMore() { 
    this.setState({ limit: this.state.limit + 2 }); 
}

来源

2017-10-16 18:58:34

加载更多按钮与Reactjs无法正常工作

回答

相关问题