搜索ReactJS之后才渲染元素

Question

發生了什么？

僅當我在input鍵入字母並單擊search ，這些元素才會呈現，否則就不會發生。

會發生什么事？

用於使元素自動呈現而無需任何操作。

我不知道發生什么事了...

誰來幫幫我 ？ 我的代碼：

 class Pagination extends React.Component { constructor() { super(); this.state = { elementsPerPage:3, currentPage:0, peoples:[ {id:0, name:"Jean"}, {id:1, name:"Jaquinha"}, {id:2, name:"Ricardo"}, {id:3, name:"JaCA"}, {id:4, name:"Letiiicia"}, {id:5, name:"Dai"}, {id:6, name:"Da iIIane"}, {id:7, name:"Tamy"}, {id:8, name:"Tamyresss"}, {id:9, name:"Tamyres"}, {id:10, name:"Abeu"}, {id:11, name:"Abellll"} ], input: "", filtered: [], }; this.nextPage = this.nextPage.bind(this); this.previousPage = this.previousPage.bind(this); this.filterNames = this.filterNames.bind(this); this.getValueInput = this.getValueInput.bind(this); } getValueInput(value) { this.setState({ input: value.target.value }); } filterNames() { const {peoples} = this.state; this.state.filtered = peoples.filter(item => item.name.includes(this.state.input)) this.setState({ filtered: this.state.filtered, currentPage:0 }); } elementsOnScreen() { const {elementsPerPage, currentPage, filtered} = this.state; return filtered .map((item) => <li>{item.name}</li>) .slice(currentPage*elementsPerPage, currentPage*elementsPerPage + elementsPerPage) } nextPage() { const {elementsPerPage, currentPage, peoples} = this.state; if ((currentPage+1) * elementsPerPage < peoples.length){ this.setState({ currentPage: this.state.currentPage + 1 }); console.log(this.state.currentPage) } } previousPage() { const { currentPage } = this.state; if (currentPage - 1 >= 0){ this.setState({ currentPage: this.state.currentPage - 1 }); } } render() { return ( <div> <input type="text" onChange={ this.getValueInput }></input> <button className='search' onClick={this.filterNames}> Search </button> <button onClick={this.previousPage}> Previous </button> <button onClick={this.nextPage}> Next </button> <ul>Names: {this.elementsOnScreen()}</ul> <h3>Current Page: {this.state.currentPage}</h3> </div> ); } } ReactDOM.render( <Pagination/>, document.getElementById('root') ) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div> 

Answer 1

問題是您正在渲染filtered但未初始化。 僅在更改輸入或頁面后才進行設置。 如果您將其初始化為與其他peoples相同，則它看起來可以工作：

const peoples = [
  {id:0, name:"Jean"}, 
  {id:1, name:"Jaquinha"}, 
  {id:2, name:"Ricardo"}, 
  {id:3, name:"JaCA"}, 
  {id:4, name:"Letiiicia"}, 
  {id:5, name:"Dai"}, 
  {id:6, name:"Da iIIane"}, 
  {id:7, name:"Tamy"}, 
  {id:8, name:"Tamyresss"},
  {id:9, name:"Tamyres"}, 
  {id:10, name:"Abeu"}, 
  {id:11, name:"Abellll"}
];

this.state = {
  elementsPerPage:3,
  currentPage:0,
  peoples,
  input: "",
  filtered: peoples,
};

還需要將分頁更改為基於過濾后的數組而不是原始數組：

const {elementsPerPage, currentPage, filtered} = this.state;

if ((currentPage+1) * elementsPerPage < filtered.length){

參見下面的演示：

 class Pagination extends React.Component { constructor() { super(); const peoples = [ {id:0, name:"Jean"}, {id:1, name:"Jaquinha"}, {id:2, name:"Ricardo"}, {id:3, name:"JaCA"}, {id:4, name:"Letiiicia"}, {id:5, name:"Dai"}, {id:6, name:"Da iIIane"}, {id:7, name:"Tamy"}, {id:8, name:"Tamyresss"}, {id:9, name:"Tamyres"}, {id:10, name:"Abeu"}, {id:11, name:"Abellll"} ]; this.state = { elementsPerPage:3, currentPage:0, peoples, input: "", filtered: peoples, }; this.nextPage = this.nextPage.bind(this); this.previousPage = this.previousPage.bind(this); this.filterNames = this.filterNames.bind(this); this.getValueInput = this.getValueInput.bind(this); } getValueInput(value) { this.setState({ input: value.target.value }); } filterNames() { const {peoples} = this.state; this.setState({ filtered: peoples.filter(item => item.name.includes(this.state.input)), currentPage:0 }); } elementsOnScreen() { const {elementsPerPage, currentPage, filtered} = this.state; return filtered .map((item) => <li>{item.name}</li>) .slice(currentPage*elementsPerPage, currentPage*elementsPerPage + elementsPerPage) } nextPage() { const {elementsPerPage, currentPage, filtered} = this.state; if ((currentPage+1) * elementsPerPage < filtered.length){ this.setState({ currentPage: this.state.currentPage + 1 }); } } previousPage() { const { currentPage } = this.state; if (currentPage - 1 >= 0){ this.setState({ currentPage: this.state.currentPage - 1 }); } } render() { return ( <div> <input type="text" onChange={ this.getValueInput }></input> <button className='search' onClick={this.filterNames}> Search </button> <button onClick={this.previousPage}> Previous </button> <button onClick={this.nextPage}> Next </button> <ul>Names: {this.elementsOnScreen()}</ul> <h3>Current Page: {this.state.currentPage}</h3> </div> ); } } ReactDOM.render( <Pagination/>, document.getElementById('root') ) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>