如何使用 map 函数无限迭代数组？答案

【问题标题】：How do I iterate over an array with a map function, infinitely?如何使用 map 函数无限迭代数组？
【发布时间】：2018-08-21 07:59:22
【问题描述】：

我正在构建一个 React JS 应用程序。所以，我想从一个数组中一遍又一遍地打印一些东西，但它只有两个元素。我正在使用一个名为“Typist”的自定义包，它使我能够用我输入的任何内容提供一种“打字”的动画。

我基本上是在尝试输入“Hi”，抹掉它，然后输入“Ola”，然后抹掉它，然后再次以“Hi”开始并不断重复这种模式。

这是我现在拥有的：

let greetings=["Hi","Ola"];

render() {

    return(
        <div className={"TypistExample-header"} >
            <Typist className={"TypistExample"}>

                <Typist.Delay ms={1000} />
                {
                    greetings.map(i =>{
                        return <li><h1>{i}</h1>
                            {<Typist.Backspace count={12} delay={1000} />}
                        </li>
                    })

                }

            </Typist>

P.S 我确实找到了几次这样做的方法，但仍然不是无限的，这样做：

let greetings=["Hi","Ola"];

var actualTyping= greetings.map(i =>{
    return <li><h1>{i}</h1>
        {<Typist.Backspace count={12} delay={1000} />}
    </li>

});

var rows=[];

for(var i=0;i<10;i++){
    rows.push(actualTyping)
}

return(
        <div className={"TypistExample-header"} >
            <Typist className={"TypistExample"}>

                <Typist.Delay ms={1000} />

                {rows}

            </Typist>
       </div>
    );

【问题讨论】：

有一个叫做模（%）的运算符。它用于查找提醒。例如 5%2 是 1，因为 5 除以 2 给出了 1 的提示。它本质上所做的是，上升到指定的 N，然后再次回绕到 0。例如。 i % 5 将导致 1,2,3,4,0,1,2... 对于 i 的所有连续值

标签： javascript reactjs ecmascript-6 jsx babeljs

【解决方案1】：

您可以使用 Typist 的 onTypingDone 属性重新启动动画。通过 state 将文本数组传递给 Typist。打字完成后，清空状态，将渲染的 Typist 移除，然后恢复原来的文字，再次打字（sandbox）。

注意： setState 是异步的，它会将更新一起批量更新或推迟到以后进行。在这种情况下，我们要清除text（设置null），并且只有在视图更新后重新填充text。为此，我们可以使用 setState 的第二个参数，这是一个仅在应用更新 (null) 后触发的回调。

const greetings = ["Hi", "Ola"];

class ContType extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      text: props.text
    };
  }

  onTypingDone = () => {
    this.setState(
      {
        text: null
      },
      () =>
        // run this callback after the state updates
        this.setState({
          text: this.props.text
        })
    );
  };

  render() {
    const { text } = this.state;

    return (
      text && (
        <Typist onTypingDone={this.onTypingDone}>
          <Typist.Delay ms={1000} />
          {text.map((i, index) => {
            return (
              <div key={index}>
                <h1>{i}</h1>
                {<Typist.Backspace count={12} delay={1000} />}
              </div>
            );
          })}
        </Typist>
      )
    );
  }
}

render(<ContType text={greetings} />, document.getElementById("root"));

【讨论】：

太棒了！这个对我有用。虽然我理解回调函数的使用以及在再次更改为 props 之前将 state 设置为 null 的目的，但请您详细说明一下如何调用这个回调函数，与第一个 setState 函数分开用逗号。
欢迎 :) 我添加了有关 setState 回调的附加信息。

【解决方案2】：

更好和简单的解决方案是创建一个您选择的常量整数数组，然后使用为整数指定的值进行映射。

const a = [1...10000]
let greetings = ["hi", "hello"]
  render(){
    return(
      a.map( i => {
        <h1>greeting[0] - greeting[1]</h1>
      })
    )
}

请始终牢记，无限循环会导致 React 引擎崩溃。好的做法是为此类情况指定一个整数值进行映射。

【讨论】：