如何在Map渲染完成后调用setState

首先明确：Array.prototype.map是同步遍历方法，遍历过程会立即完成。但React组件渲染是异步更新DOM的，所以要分两种场景处理你的需求：

场景1：仅需.map遍历完成后执行状态更新 #

如果不需要等待DOM渲染完成，只是想在遍历完data数组后立刻更新状态，可先保存map结果，再通过useEffect控制执行时机（避免无限重渲染）：

import { useState, useEffect } from 'react';

const CardList = ({ data, handleTagClick }) =>  {
  const [someState, setSomeState] = useState(null);

  // 先完成数组遍历生成组件列表
  const cardElements = data.map((post, index) => (
    <Card
      key={`card_${index}`}
      post={post}
      handleTagClick={handleTagClick}
    />
  ));

  // 仅当data变化时，在map完成后调用setState
  useEffect(() => {
    setSomeState('遍历完成，更新状态');
  }, [data]);

  return (
    <ul role="list" className="card_list">
      {cardElements}
    </ul>
  )
};

场景2：等所有Card组件挂载到DOM后执行状态更新 #

如果需要等待所有Card组件都渲染到DOM（比如要获取DOM元素信息），可结合useRef和useEffect实现：

import { useState, useEffect, useRef } from 'react';

const CardList = ({ data, handleTagClick }) =>  {
  const [someState, setSomeState] = useState(null);
  const cardRefs = useRef([]);

  // 监听所有Card是否完成DOM挂载
  useEffect(() => {
    if (cardRefs.current.length === data.length) {
      setSomeState('所有Card已挂载，更新状态');
    }
  }, [data, cardRefs.current.length]);

  return (
    <ul role="list" className="card_list">
      {data.map((post, index) => (
        <Card
          ref={(el) => cardRefs.current[index] = el}
          key={`card_${index}`}
          post={post}
          handleTagClick={handleTagClick}
        />
      ))}
    </ul>
  )
};

注意事项 #

• 若Card是自定义函数组件，需要用forwardRef包裹才能接收ref：

const Card = React.forwardRef(({ post, handleTagClick }, ref) => {
  return (
    <li ref={ref} className="card">
      {/* 组件内容 */}
    </li>
  );
});

• 禁止在组件渲染阶段直接调用setState，否则会触发无限重渲染，必须通过useEffect加依赖控制执行时机。

内容的提问来源于stack exchange，提问作者Jose Molina