Question

我有这个：

import React from 'react';
import { arr } from '../../../modules/ranks';
import { LOVE } from '../../components/svg/LOVE';

export const map = () => {
  let col = 9;
  let j = 9;
  let k = 9;

  return (
    arr.map((rank, i) => {
      if (i === col) {
        col = col + j--;
        if (j === 0) {
          j = k--;
        }
        return [
          <LOVE key={ rank } rank={ rank } />,
          <div className="clearfix"></div>,
        ];
      }
      return (
        <LOVE key={ rank } rank={ rank } />
      );
    })
  );
};

基本上，我有一系列排名（模块/排名）只是一个很长的列表。但是我需要在其中一些上添加clearfix div，因为我在网站上进行了映射，看起来很漂亮。

我上面的内容有效，但是数组很长并且会变长，因此页面必须等到它完成循环才会显示网站的其余部分。

我一直在寻找异步，我试图让它发挥作用，但老实说，我很难掌握......

有人可以帮我使用caolan / async吗？我多次阅读文档......

azium的单独问题： @azium 感谢您推荐我的帖子。我试着让它起作用，但我不确定......它现在没有加载任何东西。父组件是一个简单的渲染<map />。

import React, { Component } from 'react';
import { arr } from '../../../modules/ranks';
import { LOVE } from '../../components/svg/LOVE';

export class map extends Component {
  constructor() {
    super();
    this.state = {
      LOVE: [],
    };
  }

  componentDidMount() {
    this.load();
  }

  load() {
    let col = 9;
    let j = 9;
    let k = 9;
    setTimeout(() => {
      arr.map((rank, i) => {
        if (i === col) {
          col = col + j--;
          if (j === 0) {
            j = k--;
          }
          return (
            this.setState({
              LOVE: this.state.LOVE.concat([
                <LOVE key={ rank } rank={ rank } />,
                <div className="clearfix"></div>,
              ]),
            })
          );
        }
        return (
          this.setState({
            LOVE: this.state.LOVE.concat(<LOVE key={ rank } rank={ rank } />),
          })
        );
      });
    });
  }

  render() {
    return (
      <div>
        { this.state.LOVE }
      </div>
    );
  }
}

Answer 1

以下是我在帖子评论中所描述的内容示例。我创建了一个导入map的组件，然后通过setTimeout异步执行，然后调用该组件的this.setState。

import React from 'react';
import map from './map';

class MyComponent extends React.Component {
   constructor(props) {
     super(props);
     this.state = { loveElements: [] };
   }

   componentDidMount() {
     // async
     setTimeout(() => {
       const loveElements = map();
       this.setState({ loveElements: loveElements });
     }, 0);
   }

   render() {
     return (
       <div>
          {this.state.loveElements}
       </div>
     );
   }
}

Answer 2

lazy.js看起来可能对你有用......

var asyncSequence = Lazy(array)
  .async(100) // specifies a 100-millisecond interval between each element
  .map(inc)
  .filter(isEven)
  .take(20);

// This function returns immediately and begins iterating over the sequence asynchronously.
asyncSequence.each(function(e) {
  console.log(new Date().getMilliseconds() + ": " + e);
});

function inc(x) { return x + 1; }
function isEven(x) { return x % 2 === 0; }

循环遍历数组异步

2 个答案: