我正在尝试使用 next.js 设置 Firebase。我在控制台中收到此错误。

\n

FirebaseError：预计 collection() 的第一个参数是 CollectionReference、DocumentReference 或 FirebaseFirestore

\n

这是我的自定义钩子之一

import { onAuthStateChanged, User } from '@firebase/auth'\nimport { doc, onSnapshot, Unsubscribe } from 'firebase/firestore'\nimport { useEffect, useState } from 'react'\nimport { auth, fireStore } from './firebase'\n\nexport const useUserData = () => {\n  const [username, setUsername] = useState<string | null>(null)\n\n  const [currentUser, setCurrentUser] = useState<User | null>(null)\n\n  useEffect(() => {\n    let unsubscribe: void | Unsubscribe\n\n    onAuthStateChanged(auth, (user) => {\n      if (user) {\n        setCurrentUser(user)\n        // The …

我正在尝试在 Next.js 项目中使用 Tailwind CSS，但我无法将 Tailwind 类与 Next.js Image 组件一起使用。

这是我的代码：

<Image
    src={img.img}
    alt="Picture of the author"
    width="200"
    height="200"
    className="bg-mint text-mint fill-current"
></Image>

我想使用 Tailwind 类而不是Next.js 图像的heightandwidth属性。但我不能，因为它给我一个错误。此外，unsizedproperty 会引发另一个错误，指出它已被弃用。有什么解决办法吗？

如果我不使用heightandwidth属性，这里是错误。

当我使用该layout='fill'属性时，它只显示一张图片。如果我使用该unsized属性，则会显示以下错误。

我是 tailwindcss 的新手。但我这里有一个问题。

查看屏幕截图，背景颜色未应用于导航栏中。此外，整个 html 正文在中小屏幕上并没有获得全宽。

我不明白的是，我仍然没有使用 tailwindcss 中的任何响应类，如 md、sm 或 lg。但宽度存在严重问题，我尝试使用 w-full 和 w-screen 的顺风类。它们都不起作用。这是问题的截图

您可以在这里找到代码：https ://codesandbox.io/s/focused-curran-jdyup

提前致谢。

编辑：

好的，看看这个 GIF，伙计们。

我正在尝试在 Tailwind Play 中重现该问题。但我不能。然后我注意到同一行代码在 Tailwind Play 中完美运行，但在 nextjs 中却不起作用。我不知道这里的问题是什么，但我在下面分享了 Tailwind Play 和 NextJS 代码。顺风玩法：

<div class="flex justify-between items-center p-5 bg-indigo-800 text-white">
      <div class="ml-16">
        <div class="flex items-center">
          <div class="">
            <h4 class="tracking-widest uppercase">GrayScale</h4>
          </div>
          <div class="lg:hidden">
            <button
              type="button"
              class="text-gray-400 mt-1 hover:text-white focus:text-white focus:outline-none"
            >
              <svg
                class="w-6 h-6"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2" …

我在用 Yarn 安装新的 npm 包时遇到问题。每次我继续添加一个新包时，它都会向我抛出这个错误。但是当我删除 node_modules 文件夹并运行 Yarn 时，一切正常。同样，当我尝试添加另一个包时，它会抛出同样的错误。任何解决方案，我现在都很头疼。

我正在开发一个以 Nest.js 作为后端的 next.js 应用程序。现在，即使我在main.tsNest.js 文件中启用了 cors，我也会遇到 cors 错误。

这是我的 main.ts 文件。

    import { NestFactory } from '@nestjs/core';
    import { AppModule } from './app.module';
    import cookieParser from 'cookie-parser';
    
    async function bootstrap() {
      const app = await NestFactory.create(AppModule);
      if (process.env.APP_ENV !== 'production') {
        app.enableCors({
          allowedHeaders: '*',
          origin: '*',
          credentials: true,
        });
      } else {
        app.enableCors({
          origin: process.env.FE_URL,
          credentials: true,
        });
      }
    
      app.use(cookieParser());
      await app.listen(process.env.PORT || 5000);
    }
    bootstrap();

我也尝试了以下方法。

    import { NestFactory } from '@nestjs/core';
    import { AppModule } …

我正在尝试重新创建一个从 vanilla CSS 到 tailwindcss 的项目。但我尝试了很多选择，但都失败了。

这是 CSS 代码：

header {
    background: linear-gradient(rgba(135, 80, 156, 0.9), rgba(135, 80, 156, 0.9)), url(img/hero-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    position: relative;
}

任何人都可以将此代码转换为等效的 tailwindcss 代码吗？

我有以下代码。

const [verificationValues, setValues] = useRecoilState(verificationFormValues);
setValues({
   ...verificationValues!,
   nidOrPassport,
   addressProof,
   recentPhoto,
   bankAccountStateMents,
   businessProof,
   salarySlip,
   employeeIdCard,
});

提交表单后，我将调用 setValues 函数。当我在控制台记录此验证值时，它没有更新验证值。但是，如果我在提交处理程序之后控制台记录值，那么它就会工作并显示更新的值。另外，我刚刚注意到它在我再次按下提交按钮后才起作用。此外，setValues 函数不是异步的，需要一些时间才能完成。那么为什么会发生这种情况呢？我现在很困惑。提前致谢。

重要的

那些nidOrPassport、addressProof、recentPhoto等都是对象

我正在使用 android studio，但在 flutter 检查器中找不到切换平台模式。我在哪里可以找到它？

我有以下代码，

const Layout: React.FC<LayoutProps> = ({ children }) => {
    const darkMode = useRecoilValue(darkModeAtom)
    
    console.log('darkMode: ', darkMode)
    return (
        <div className={`max-w-6xl mx-auto my-2 ${darkMode ? 'dark' : ''}`}>
            <Nav />
            {children}
            <style jsx global>{`
                body {
                    background-color: ${darkMode ? '#12232e' : '#eefbfb'};
                }
            `}</style>
        </div>
    )
}

我正在使用 recoil 和recoil-persist。那么，当 darkMode 值为 true 时，className 应该包含一个 dark 类，对吧？但事实并非如此。我不知道这里出了什么问题。但是第一次刷新的时候不行，之后就正常了。我还尝试使用 darkMode === true 条件，但它仍然不起作用。您会看到样式化的 jsx，效果很好。这随着 darkMode 值的变化而变化，当我刷新时，它会保留数据。但是当我检查时，我没有在第一个 div 中看到黑暗类。另外，当我 console.log darkMode 值时，我看到 true，但不包括 dark 类。

这是沙盒链接

也许这是一个愚蠢的错误，但我在这上面浪费了很多时间。那么我在这里做错了什么？

我正在使用 vue 3 和 vite。我注意到一些奇怪的事情。哦，vue 图标正在加载大约 108 MB 的包大小，即使在 vitejs 中也需要花费大量时间来加载。这是我的设置

import { addIcons, OhVueIcon } from 'oh-vue-icons'
import {
  FaFacebookSquare,
  FaInstagram,
  FaLinkedin,
  FaQuora,
  FaTwitter,
  FaYoutube,
} from 'oh-vue-icons/icons'

// register the icons
addIcons(
  FaFacebookSquare,
  FaInstagram,
  FaLinkedin,
  FaQuora,
  FaTwitter,
  FaYoutube
)

const app = createApp(App)
app.component('VIcon', OhVueIcon)
app.mount('#app')

然后在我的组件中：

import { addIcons, OhVueIcon } from 'oh-vue-icons'
import {
  FaFacebookSquare,
  FaInstagram,
  FaLinkedin,
  FaQuora,
  FaTwitter,
  FaYoutube,
} from 'oh-vue-icons/icons'

// register the icons
addIcons(
  FaFacebookSquare,
  FaInstagram,
  FaLinkedin,
  FaQuora,
  FaTwitter,
  FaYoutube
)

const …

我想检查一个对象是否只有一个属性或只有两个属性并且在javascript中没有其他属性。

假设我有一个这样的对象。

const obj1 = {
   a : 'something'
}

或者

const obj2 = {
  a : 'somthing',
  b : 'somthing else'
}

现在我如何检查 obj1 是否只有 a 而没有其他属性？另外，如何检查 obj2 是否只有 a 和 b 而没有其他属性？谢谢你的时间