使用React

Question

  

我有一个像这样的对象数组

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

Answer 1

更改此

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])会让您将i值设置为0，这就是为什么当您点击下一步时继续获取第二个数据。

通过将其更改为此let i = Guide.indexOf(this.state.index)，您将i值设置为当前索引，而不是0.

我希望我的解释是可以理解的：）

Answer 2

您的状态应包含所需的最少信息，在本例中是数组中项目的索引。您也可以使用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>

Answer 3

我不确定你要用“让我= 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
          });

    }
}

在render方法中，使用Guide [this.state.index]获取当前索引的数据。