加載更多按鈕與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無法正常工作

回答

相關問題