Question

我有一个对象数组。如何在点击时循环播放此数组？

test = ['a', 'b', 'c', 'd']
 {this.state.test.map(function(i){
     return <span> {i} </span>
  })}

我通常会像这样在反应中循环，但这会立即打印出来。如何显示＆＃39; a＆＃39;在页面上，然后下次我点击它，我显示＆＃39; b＆＃39;那么直到数组结束？

我需要一个能够告诉我在阵列中的位置并在适当的时候在页面上显示的功能

Answer 1

您可以实施，例如计数器变量并使用Array#slice显示test数组中指定数量的元素。

<强> Codesandbox link

import React from "react";

export default class Hello extends React.Component {
  state = {
    test: ["a", "b", "c", "d"],
    index: 0
  };

  handleClick = () => {
    let i = this.state.index < this.state.test.length ? this.state.index += 1 : 0;
    this.setState({ index: i });
  };

  render() {
    return (
      <div>
        {this.state.test.slice(0, this.state.index).map(v => {
          return (
            <span>{v}</span>
          );
        })}
        <button onClick={this.handleClick}>Click</button>
      </div>
    );
  }
}

编辑：我正在玩它，实际上我甚至得到了一个更好的解决方案，它允许您避免在每个渲染上重新循环Array#map，而{{1}的帮助很小属性。我们也摆脱了hidden功能。

<强> Improved codesandbox link

Array#slice

app.js

{this.state.test.map((v, i) => { return ( <span hidden={i >= this.state.index}>{v}</span> ); })}组件：

Span.js

Answer 2

首先在您的状态下设置初始索引，然后将该索引用作跨度中的索引数组。接下来制作一些函数来处理增量，只需像这样

pd.DataFrame(res)

    name    type    supply
0   BTC     1   1.833352e+07
1   ETH     1   1.105811e+08
2   XRP     1   9.999185e+10
3   GAPS    1   2.000000e+09
4   CRO     1   1.000000e+11
5   USDT    1   4.642367e+09
6   BCH     1   1.838416e+07
7   PLF     1   1.000000e+10
8   CTAG    1   4.000000e+09
9   LINK    1   1.000000e+09

显示

const switchNinjaHandler = () => {
let looper = ++this.state.index % this.state.test.length;
setState({
  ...personsState, // WE SHOULD ALWAYS GIVE THE EXCACT INITIAL STATE VALUE, THIS IS WHERE SPREAD COMING HANDY
  this.index : looper,
});

通过反应onclick循环数组

2 个答案: