Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator)) only on production

Question

我正在将一个 Gatsby 项目从 JS 迁移到 TS，开发中一切正常，构建时没有错误，但是当我使用 gatsby serve 或部署到其他地方时，我在浏览器上收到此错误单击任何按钮时的控制台：

index.tsx:

interface CVData {
    name: string;
    position: string;
    address: string;
    email: string;
    website: string;
    twitter: string;
    github: string;
    skills: string[];
    languages: string[];
    education: any[];
    work: any[];
    projects: any[];
    awards: any[];
    publications: any[];
    interests: any[];
    excerpt: string;
}
const [cvdata, setCVdata] = React.useState<CVData>({
    name: "",
    position: "",
    address: "",
    email: "",
    website: "",
    twitter: "",
    github: "",
    skills: [],
    languages: [],
    education: [],
    work: [],
    projects: [],
    awards: [],
    publications: [],
    interests: [],
    excerpt: "",
  })
   React.useEffect(() => {
    setCVdata(JSON.parse(localStorage.getItem("cvdata") || '{}'))
  }, [])

  React.useEffect(() => {
    localStorage.setItem("cvdata", JSON.stringify(cvdata))
  }, [cvdata])

  const [currentLang, setCurrentLang] = React.useState("")
  const addlanguage = () => {
    const newLangs = [...cvdata.languages, currentLang] // line that throws error
    setCVdata({ ...cvdata, languages: newLangs })
    setCurrentLang("")
  }
  const remlanguage = () => {    
    const newLangs = cvdata.languages.slice(0, -1) // line that throws error
    setCVdata({ ...cvdata, languages: newLangs })
    setCurrentLang("")
  }
  
  // and the buttons:
                <button
                  type="button"
                  onClick={addlanguage}
                  className="border-2 border-blue-700 text-blue-700 font-bold p-2 hover:text-gray-300 hover:bg-blue-700 rounded-lg px-2 mb-2"
                >
                  <Trans>Add</Trans>
                </button>
                <button
                  type="button"
                  onClick={remlanguage}
                  className="border-2 border-blue-700 text-blue-700 font-bold p-2 hover:text-gray-300 hover:bg-blue-700 rounded-lg px-2 mb-2"
                >
                  <Trans>Remove</Trans>
                </button>

我正在学习 TS，所以我使用了很多 any，但是我不明白为什么它说 cvdata.languages 未定义（它还会为每个按钮抛出错误表格）

您可以在 this branch, especifically index.tsx

中找到完整代码

Answer 1

如果localstorage中没有设置"cvdata"键，我将第一个useEffect修改为

React.useEffect(() => {
    setCVdata(JSON.parse(localStorage.getItem("cvdata") || JSON.stringify(emptycvdata)))
  }, [])

其中 emptycvdata 是默认的 cvdata 对象（我在 useState 中使用的对象）

然而，这还不够，我必须检查 onClick 函数中 cvdata 对象的每个键（否则缺少键会 return undefined）。

例如，在addlanguage中我替换了

const newLangs = [...cvdata.languages, currentLang]

与

const newLangs = cvdata.languages ? [...cvdata.languages, currentLang] : [currentLang]

和

const newLangs = cvdata.languages.slice(0, -1)

与

const newLangs = cvdata.languages ? cvdata.languages.slice(0, -1) : []

我对其他功能也做了同样的操作，现在一切似乎都很好。

Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator)) only on production

Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator)) only on production

typescript

reactjs

gatsby