是什么导致我的 React 应用程序中出现“Unexpected Fiber popped”警告？

Question

在一个相当复杂的应用程序中，我做了一些与

ref

相关的更改，然后突然开始看到此警告。

尽管这是一个警告，但它破坏了我的应用程序。

我正在使用 React 16.3.0 和 next.js 后端。

是什么原因导致“意外光纤弹出”警告？

Answer 1

这是 React 中的一个错误。

请用一个最小的例子来报告它，我们会修复它。

Answer 2

更新为 React

>=16.3.1

这是一个红鲱鱼警告，当发生其他错误时会抛出该警告。

在我的特殊情况下，这是由于将 prop 传递给它不理解的 DOM 元素而引起的：

<div isModalOpen={true}>... Modal contents ...</div>

[email protected]

修复了红鲱鱼警告。

Answer 3

我在将 React 从 16.3.0 升级到 16.3.1 后遇到此错误，但忘记将 React-Dom 从 16.3.0 升级以匹配 React。升级到 16.3.1 后问题就消失了。

Answer 4

当我在动画组件中没有使用

Animated.

前缀时，就发生了这种情况。例如，如果您要对

<View>

组件进行动画处理，请使用,

<Animated.View>

不是

<View>

Answer 5

我在 React Native 中遇到了这个错误。原来我用的是div而不是View🤦u200d♂️

Answer 6

我也有这个错误。这让我压力很大，但过了一会儿我发现我使用了箭头异步函数，而不是在react中调用单个函数作为组件。我重构后解决了！

这是我之前的代码：

import { must_login } from "./server-utils";

export default async function Dashboard() {

    return(
        <Suspense fallback={<p>Loading . .</p>}>
            {(async () => {
                await must_login();
                return <></>;
            })()}
        </Suspense>
    };
}

这是之后：

import MustLogin from "./must-login"

export default async function Dashboard() {

    return(
        <Suspense fallback={<p>Loading . .</p>}>
            <MustLogin />
        </Suspense>
    };
}

在里面

must-login.tsx

:

import { must_login } from "./server-utils";

export async function MustLogin() {
    await must_login();
    return <></>;
}