错误：元素类型无效：需要字符串或函数（对于复合组件）。检查“SelectProfileContainer”的渲染方法

Question

我在 index.js 中有一个问题，看起来我在导出和导入方面有错误，我检查了我的代码，但找不到错误。请问有什么帮助吗？

我收到此错误：

错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

查看SelectProfileContainer的渲染方法

我的反应代码（index.js）：

import React from "react";
import { render } from "react-dom";
import "normalize.css";
import App from "./app";
import { GlobalStyles } from "./global-styles";
import { firebase } from "./lib/firebase.prod";
import { FirebaseContext } from "./context/firebase";
render(
  <>

    <FirebaseContext.Provider value={{ firebase }}>

      <GlobalStyles />

      <App />

    </FirebaseContext.Provider>
  </>,
  document.getElementById("root")
);

这里是 GlobalStyles.js 代码：

import { createGlobalStyle } from "styled-components";

export const GlobalStyles = createGlobalStyle`
html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: black;
    color: #333333;
    font-size: 16px;
}

这是给浏览器的：

检查SelectProfileContainer的渲染方法。

▶ 23 个堆栈帧被折叠。

模块。

C:/Users/CPU-MAJD/OneDrive/Desktop/Completely_fully_Netflix-clone/netflix/src/index.js:9

6 |从“./lib/firebase.prod”导入{ firebase}；

7 |从“./context/firebase”导入{ FirebaseContext }；

8 |

> 9 |渲染（

10 |

11 |

12 |

Answer 1

检查你的 repo 后，我可以看到 SelectProfileContainer 组件：

export function SelectProfileContainer({ user, setProfile }) {
  return (
    <>
      <Header bg={false}>
        <Header.Frame>
          <Header.Logo to={ROUTES.HOME} src={logo} alt="Netflix" />
        </Header.Frame>
      </Header>

      <Profiles>
        <Profiles.Title>Who's watching?</Profiles.Title>
        <Profiles.List>
          <Profiles.User
            onClick={() =>
              setProfile({
                displayName: user.displayName,
                photoURL: user.photoURL,
              })
            }
          >
            <Profiles.Picture src={user.photoURL} />
            <Profiles.Name>{user.displayName}</Profiles.Name>
          </Profiles.User>
        </Profiles.List>
      </Profiles>
    </>
  );
}

屏幕上呈现的错误消息并没有真正的帮助，但是如果您检查控制台，您会看到以下更有用的消息：

Check your code at profiles.js:19.
    at SelectProfileContainer 

Line 19 是带有<Profiles.User> 的那个，如果您尝试检查该组件，您会注意到它在src/components/profiles/index.js 中不存在。确保有<Profiles.User> 组件并且错误消失了。