时间戳

首页 > 解决方案 > 递归无法正常工作（在 React 中）

reactjs - 递归无法正常工作（在 React 中）

问题描述

我有以下代码：

export function App() {
  return (
    <div>
      <EditText tags={[[["b",28,32]],[["br",40,40]],[["i",43,88],["b",56,64],["b",74,84]],[["b",102,105]]]}/> 
    </div>
  );
}

export const EditText = ({ tags }) => (
    <>
        {
        tags.map((section, id) => {
            console.log("id",id);
            if (section[0][0] === "i") { 
                if (id!==0) {
                    console.log("entering recursion");
                    return <EditText key={id} tags={section} />
                }
            }
            return("");
        })
        }
    </>
);

为了使其更直观，数组如下所示：

[
  [["b",28,32]],
  [["br",40,40]],
  [
    ["i",43,88],["b",56,64],["b",74,84]
  ],
  [["b",102,105]]
]

我希望这个算法在控制台中打印这样的 id：

0 1 2 0 1 2 3

因为递归是在映射中的第三个序列之后调用的。但相反，它打印的是：

0 1 2 3 0 1 2

它正在结束第一张地图，只有在它结束时，他才记得调用递归。

谁能解释我为什么会这样？

标签： reactjsrecursion

解决方案

我仍然认为这里有一些误解，所以回答你的具体问题：

它正在结束第一张地图，只有在它结束时，他才记得调用递归。

谁能解释我为什么会这样？

你的假设是正确的。循环 ( tags.map(...)) 在进行递归调用之前运行完成（这解释了console.log输出）。

当您将一些值映射到新组件（如：）时，会发生这种情况return <EditText key={id} tags={section} />，此时这些新组件（充当函数）不会立即被调用/执行，但只有当 react 在渲染新创建的数组时遇到它们时（返回的值.map）。

这与某人特别的答案中显示的纯 JavaScript 示例的行为不同。立即进行递归调用的地方 ( editText(section))。

推荐阅读