獲取下一個項目使用數組陣營

我有對象這樣獲取下一個項目使用數組陣營

const Guide = [ 
     { 
      id: 1, 
      title: 'Dashboard', 
      content: 'The dashboard is your main homepage. It will display a feed of looks...' 
     }, 
     { 
      id: 2, 
      title: 'Discover', 
      content: 'Discover allows you to find new looks, what is trending and search for looks, brands and users' 
     }, 
     { 
      id: 3, 
      title: "Upload you look, style guide and more " 
     }, 
     { 
      id: 4, 
      title: "Upload you look, style guide and more " 
     }, 
     { 
      id: 5, 
      title: "Upload you look, style guide and more " 
     } 
    ]

我希望能夠點擊一個按鈕，進入到顯示器的下一個對象的數據數組直到最後一個。目前，當我點擊按鈕時，它只是變成第二個對象「發現」並停在那裏，我怎樣才能確保它通過這個功能。請原諒我的語法。

這是我的狀態下，當部件安裝

  componentWillMount(){ 
      this.setState({ 
       index: Guide[0] 
      }) 
     }

初始狀態指數是= 0，這是我的函數來轉到下一個對象

moveNext =() => { 

    let i = Guide.indexOf(Guide[0]) 

    if(i >= 0 && i < Guide.length) 
      this.setState({ 
      index: Guide[i + 1] 
      }) 
    }

來源

2017-07-19 Dumisani

您的狀態應該包含所需的最少信息，在這種情況下，它是數組中項目的索引。你也可以使用id，但這需要額外的工作，而且看起來他們直接映射到索引上。

const info = [{ 
 
    title: 'Dashboard', 
 
    content: 'The dashboard is your main homepage. It will display a feed of looks...' 
 
    }, 
 
    { 
 
    title: 'Discover', 
 
    content: 'Discover allows you to find new looks, what is trending and search for looks, brands and users' 
 
    }, 
 
    { 
 
    title: "Upload you look, style guide and more " 
 
    } 
 
]; 
 

 
class Guide extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { 
 
     index: 0 
 
    };  
 
    } 
 
    
 
    goToNext =() => { 
 
    this.setState({ index: (this.state.index + 1) % info.length }); 
 
    }; 
 
    
 
    render() { 
 
    const item = info[this.state.index]; 
 
    return (<div> 
 
     <h2>{item.title}</h2> 
 
     <p>{item.content}</p> 
 
     <button onClick={this.goToNext}>next</button> 
 
    </div>); 
 
    } 
 
} 
 

 
ReactDOM.render(<Guide/>, document.getElementById("app"));

<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="app"></div>

來源

2017-07-19 12:24:53

謝謝你的迴應@湯姆，這種做法實際上是比我有更簡單 – Dumisani

變化這

moveNext =() => { 

    let i = Guide.indexOf(Guide[0]) 

    if(i >= 0 && i < Guide.length) 
      this.setState({ 
      index: Guide[i + 1] 
      }) 
    }

對此

moveNext =() => { 

    let i = Guide.indexOf(this.state.index) 

    if(i >= 0 && i < Guide.length) 
      this.setState({ 
      index: Guide[i + 1] 
      }) 
    }

說明：

這let i = Guide.indexOf(Guide[0])讓你保持我值設置爲0，這就是爲什麼當你點擊下一步，你不斷收到第二個數據。

通過它改變這個let i = Guide.indexOf(this.state.index)您將設置I值到當前的指數，不是0

我希望我的解釋是可以理解的:)

來源

2017-07-19 10:51:05

謝謝@Hana，它使多大意義 – Dumisani

我不知道你想什麼與「讓我= Guide.indexOf（指南[0]）」。嘗試通過遞增1的狀態的指標，是這樣的：

componentWillMount() { 
    this.state = { index: 0 }; 
} 

moveNext =() => { 

    let i = this.state.index; 

    if(i >= 0 && i < Guide.length) { 
      this.setState({ 
      index: i + 1 
      }); 

    } 
}

在渲染方法中，使用說明書[this.state.index]來得到當前的索引的數據。

來源

2017-07-19 10:53:55 dejakob

獲取下一個項目使用數組陣營

回答

相關問題