ReferenceError：初始化前无法访问“步骤”

Question

我正在尝试在 ReactJS 中制作向导。我正在遵循在线教程，但是他们没有解释如何通过多个页面进行制作。于是我尝试了自己的方法去应用，但是并没有成功。

\n

这是第一页的代码：

\n

import React, { useState } from "react";\nimport { Button, Form } from "react-bootstrap";\nimport { Link } from "react-router-dom";\nimport "./style.css";\nfunction NewGame() {\n  const [activeStep, setActiveStep] = useState(steps[0]);\n  const [steps, setSteps] = useState([\n    {\n      key: "firstStep",\n      label: "My First Step",\n      isDone: true,\n      component: firstStep,\n    },  \n  ]);\n  const index = steps.findIndex((x) => x.key === activeStep.key);\n  setSteps((prevStep) =>\n    prevStep.map((x) => {\n      if (x.key === activeStep.key) x.isDone = true;\n      return x;\n    })\n  );\n \n  const firstStep = () => {\n    return (\n      <div>\n        <div className="box">\n          <div className="steps">\n            <ul className="nav">\n              {steps.map((step, i) => {\n                return (\n                  <li\n                    key={i}\n                    className={`${\n                      activeStep.key === step.key ? "active" : ""\n                    } ${step.isDone ? "done" : ""}`}\n                  >\n                    <div>\n                      Step {i + 1}\n                      <br />\n                      <span>{step.label}</span>\n                    </div>\n                  </li>\n                );\n              })}\n            </ul>\n          </div>\n          <div className="step-component">{activeStep.component()}</div>\n          <div className="btn-component">\n            <input\n              type="button"\n              value="Back"\n              onClick={handleBack}\n              disabled={steps[0].key === activeStep.key}\n            />\n            <input\n              type="button"\n              value={\n                steps[steps.length - 1].key !== activeStep.key\n                  ? "Next"\n                  : "Submit"\n              }\n              onClick={handleNext}\n            />\n          </div>\n        </div>\n        <Form className="column justify-content-center page">\n          <Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">\n            <Form.Label>Benzersiz Ad</Form.Label>\n            <Form.Control as="textarea" rows={3} />\n          </Form.Group>\n          <Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">\n            <Form.Label>G\xc3\xb6r\xc3\xbcnen \xc4\xb0sim</Form.Label>\n            <Form.Control as="textarea" rows={3} />\n          </Form.Group>\n          <Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">\n            <Form.Label>Oyun A\xc3\xa7\xc4\xb1klamas\xc4\xb1</Form.Label>\n            <Form.Control as="textarea" rows={3} />\n          </Form.Group>\n          <Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">\n            <Form.Label>Oyun T\xc3\xbcr\xc3\xbc</Form.Label>\n            <Form.Control as="textarea" rows={3} />\n          </Form.Group>\n          <Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">\n            <Form.Label>Bireysel</Form.Label>\n            <Form.Control as="textarea" rows={3} />\n          </Form.Group>\n          <Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">\n            <Form.Label>Oyun Durumu</Form.Label>\n            <Form.Control as="textarea" rows={3} />\n          </Form.Group>\n          <Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">\n            <Form.Label>A\xc3\xa7\xc4\xb1k</Form.Label>\n            <Form.Control as="textarea" rows={3} />\n          </Form.Group>\n        </Form>\n        <Link to="/PageTwo">\n          <Button className="button" variant="outline-secondary">\n            \xc4\xb0 L E R \xc4\xb0\n          </Button>{" "}\n        </Link>\n      </div>\n    );  \n  \n\n  const handleNext = () => {\n    if (steps[steps.length - 1].key === activeStep.key) {\n      alert("You have completed all steps.");\n    }\n\n    setActiveStep(steps[index + 1]);\n  };\n\n  const handleBack = () => {\n    const index = steps.findIndex((x) => x.key === activeStep.key);\n    if (index === 0) return;\n\n    setSteps((prevStep) =>\n      prevStep.map((x) => {\n        if (x.key === activeStep.key) x.isDone = false;\n        return x;\n      })\n    );\n    setActiveStep(steps[index - 1]);\n  };\n\n  };\n}\nexport default NewGame;\n

\n

因此，当我运行此代码时，网站上出现此错误：

\n

    ReferenceError: Cannot access \'steps\' before initialization\nNewGame\nC:/Users/SAMSUNG/Documents/src/pages/NewGame.js:6\n  3 | import { Link } from "react-router-dom";\n  4 | import "./style.css";\n  5 | function NewGame() {\n> 6 |   const [activeStep, setActiveStep] = useState(steps[0]);\n  7 |   const [steps, setSteps] = useState([\n  8 |     {\n  9 |       key: "firstStep",\n

\n

谢谢你！

\n

Answer 1

该错误告诉您该变量steps已在第 7 行初始化，但您在第 6 行使用它来设置状态变量的初始值activeStep。您不能在初始化之前使用变量，因此会出现消息“初始化之前无法访问‘步骤’”。

将第 6 行移到第 7 行开始的语句之后。