Question

请问我有问题。下面的代码使用加载更多按钮来显示记录。我将限制设置为2.问题是它显示前2个记录，然后在下一次单击时，它显示剩余的6条记录，而不是基于用户点击的限制显示在两个（2＆＃39; s）中。有人可以帮我解决这个问题。

<!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>

Answer 1

在loadMore方法中，您要设置记录长度的限制：

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

当您第一次获得记录时，您正在slice获得前2个（因为this.state.limit是2）。但在此之后，当您单击按钮时，限制将设置为记录量（8），这意味着它将获得全部8。

Answer 2

loadMore函数每次应将this.state.limit增加2：

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

Answer 3

这是基于您的代码的预期行为。单击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>;
 }
}

稍微纠正，忘了切片赢了超出你的界限（笑声）。我还添加了一些关于如何显示更多消息对话框的代码。

至于显示图像微调器，在这种情况下无法真正应用。你在这里的负荷是瞬间的。如果它正在做某种大型操作或网络提取，我会建议有一个，否则它是毫无意义的。如果你确实添加了一个，它将与完成的消息类似地完成。

加载更多按钮无法正常使用Reactjs

3 个答案: