在我的例子中，创建组件和渲染的顺序很重要。我在创建组件之前渲染了它。最好的方法是创建子组件，然后是父组件，然后呈现父组件。改变顺序为我解决了这个问题。

这是一个在某种程度上必须调试的错误。正如已经说过很多次，不恰当的导入/导出会导致这个错误，但令人惊讶的是，我从我的react-router-dom认证设置中的一个小错误中得到了这个错误，下面是我的情况:

错误的设置:

const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route
        {...rest}
        render={(props) => (token ? <Component {...props} /> : <Redirect to={{ pathname: "/login" }} />)}
    />
);

正确设置:

const PrivateRoute = ({ component: Component, token, ...rest }) => (
    <Route
        {...rest}
        render={(props) => (token ? <Component {...props} /> : <Redirect to={{ pathname: "/login" }} />)}
    />
);

唯一的区别是我在PrivateRoute组件中解构了令牌。顺便说一下，令牌是从localstorage获取的，像这样const token = localstorage . getitem ("authUser");所以如果它不在那里，我知道用户没有验证。这也会导致错误。

就我而言，VS Code让我失望了。

这是我的组件的层次结构:

<HomeScreen> =>  <ProductItemComponent> =>  <BadgeProductComponent>

我错误地导入了ProductItemComponent。事实上，这个组件以前在共享文件夹中，但后来它被移动到主文件夹中。但是当我将文件移动到另一个文件夹时，导入没有更新，保持不变:

../shared/components

同时，组件工作正常，VS Code没有突出显示错误。但是当我添加了一个新的BadgeProductComponent到ProductItemComponent，我有一个渲染错误，并认为问题是在新的BadgeProductComponent，因为当这个组件被删除，一切工作!

更重要的是，如果我通过热键到ProductItemComponent它有。/shared/components地址，然后VS Code重定向到Home文件夹的地址../ Home /components。

通常，检查所有组件级别上所有导入的正确性。

对我来说，我导入阿凡达就像 进口{ 《阿凡达》 }从'react-native-paper'; 在渲染时，我在TouchableOpacity中包装了Avatar元素，这导致了上述问题。移除TouchableOpacity后，一切正常。 <阿凡达。图像 ={{来源 uri:“……” }} 大小= {80} />

当我将nothingundefined作为值传递给我创建的子组件时，发生了这个问题。我做了这个<MyComponent src="" />导致错误。然后将其更改为<MyComponent src=" " />，因为我真的不想传递任何东西…问题解决了。

大多数情况下，这表示导入/导出错误。但是要注意，不仅要确保堆栈跟踪中引用的文件本身得到了良好的导出，还要确保该文件正确地导入了其他组件。在我的例子中，错误是这样的:

import React from //注意末尾的.css，这是错误的原因! import SeeminglyUnimportantComponent from './SeeminglyUnimportantComponent.css'; Const组件= (props) => ( < div > < SeeminglyUnimportantComponent / > {/ *……这里的组件代码*/} < / div > ）; 导出默认组件;