javascript - Get next Item in a array using React - Stack Overflow

admin管理员组

文章数量:1279008

I have an array of objects like this

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 "
        }
    ]

I want to be able to click a button and go to the display the data of the next object up to the last one. Currently when I click the button it just changes to the second object "Discover" and stops there, how can I ensure that it goes through with this functionality. Please excuse my grammar.

This is my state when the ponent mounts

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

The initial state index is = 0, And this is my function to go to the next object

moveNext = () => {

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

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

I have an array of objects like this

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 "
        }
    ]

I want to be able to click a button and go to the display the data of the next object up to the last one. Currently when I click the button it just changes to the second object "Discover" and stops there, how can I ensure that it goes through with this functionality. Please excuse my grammar.

This is my state when the ponent mounts

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

The initial state index is = 0, And this is my function to go to the next object

moveNext = () => {

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

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

• javascript
• arrays
• reactjs

Share Improve this question Follow asked Jul 19, 2017 at 10:46 DumisaniDumisani 8933 silver badges88 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

Change this

moveNext = () => {

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

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

To this

moveNext = () => {

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

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

Explanation:

This let i = Guide.indexOf(Guide[0]) makes you keep setting the i value to 0, thats why when you click next you keep getting the second data.

By change it to this let i = Guide.indexOf(this.state.index) you will set the i value to the current index, not 0.

I hope my explanation is understandable :)

Your state should contain the minimal information required, which in this case is the index of the item in the array. You could also use the id, but that would require extra work and it looks like they map directly onto the indices anyway.

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./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>

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

I'm not sure what you're trying to do with "let i = Guide.indexOf(Guide[0])". Try incrementing the index of the state by 1, like this:

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

moveNext = () => {

   let i = this.state.index;

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

    }
}

In the render method, use Guide[this.state.index] to get the data of the current index.

本文标签： javascriptGet next Item in a array using ReactStack Overflow