javascript - NextJS 错误 : Component props are undefined when building the project (everything works fine on dev mode)

Question

这个问题在这里已经有了答案:





Can't build React/Next project - found page without a React Component as default export (context api file)

(3 个答案)


3个月前关闭。




我有这个组件在开发模式下工作得很好，但是在构建它时告诉我 open Prop 是 undefined即使它工作正常，当我 console.log它在本地主机上我得到了正确的结果。

const FAQ = ({ faq, index, toggleFAQ }) => {
  return (
    <div
      className={`${Styles.faq} ${faq.open ? Styles.open : ""}`}
      key={index}
      onClick={() => toggleFAQ(index)}>
      <div className={Styles.question}>
        <div className='flex justify-between'>
          <div style={{ width: "90%" }}>
            <span>{faq.question}</span>
          </div>
          <div className='m-auto ml-24'>
            {faq.open ? (
              <img src='faq1.svg' alt='' srcSet='' />
            ) : (
              <img src='faq2.svg' alt='' srcSet='' />
            )}
          </div>
        </div>
      </div>{" "}
      <div className={Styles.answer}>
        <span>{faq.answer}</span>
      </div>
    </div>
  );
};

我传递 Prop 的地方:

const FAQpage = () => {
  const [faqs, setfaqs] = useState([
    {
      question: "1",answer:"2",open: true,
    },
    {
      question: "1",answer:"2",open: false,
    },
    {
      question:"1",answer:"2",open: false,
    },
    {
      question:"1",answer:"2",open: false,
    },
    {
      question:"1",answer:"2",open: false,
    },
    {
      question:"1",answer:"2",open: false,
    },
    {
      question:"1",answer:"2",open: false,
    },
  ]);

  const toggleFAQ = (index) => {
    setfaqs(
      faqs.map((faq, i) => {
        if (i === index) {
          faq.open = !faq.open;
        } else {
          faq.open = false;
        }

        return faq;
      })
    );
  };

  return (
    <div>
      <h1 className={Styles.title}>FAQ</h1>
      <div className={Styles.faqs}>
        {faqs &&
          faqs.map((faq, i) => (
            <FAQ faq={faq} key={i} index={i} toggleFAQ={toggleFAQ} />
          ))}
      </div>
    </div>
  );
};

运行时出错 next build :

info - Creating an optimized production build info - Compiled successfully 
info - Collecting page data [= ] info - Generating static pages (0/51) 
Error occurred prerendering page "/components/FAQ". Read more: err.sh/next.js/prerender-error 
TypeError: Cannot read property 'open' of undefined

我不知道这是来自 NextJS 方面的错误还是什么，我一直在尝试重建项目一段时间，并且同样的错误不断出现。我在另一个组件上遇到了同样的错误(基本上与我以相同方式传递 Prop 的概念相同)。任何帮助将不胜感激，谢谢

Answer 1

构建失败，因为 pages/ 下有组件文件夹:

Error occurred prerendering page "/components/FAQ".

Next.js 使用这种文件夹结构进行路由，因此您只能在其中包含页面组件。您需要将组件移出 pages/解决问题。