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

Posted 2023-02-22

【中文标题】ReferenceError：在初始化之前无法访问“步骤”

【英文标题】：ReferenceError: Cannot access 'steps' before initialization

【发布时间】：2021-08-24 18:07:23

【问题描述】：

我正在尝试在 ReactJS 中制作向导。我正在关注online tutorial，但是他们还没有解释如何通过多页来制作它。所以我尝试了自己的方法来应用它，但它没有奏效。

这是第一页的代码：

import React,  useState  from "react";
import  Button, Form  from "react-bootstrap";
import  Link  from "react-router-dom";
import "./style.css";
function NewGame() 
  const [activeStep, setActiveStep] = useState(steps[0]);
  const [steps, setSteps] = useState([
    
      key: "firstStep",
      label: "My First Step",
      isDone: true,
      component: firstStep,
    ,  
  ]);
  const index = steps.findIndex((x) => x.key === activeStep.key);
  setSteps((prevStep) =>
    prevStep.map((x) => 
      if (x.key === activeStep.key) x.isDone = true;
      return x;
    )
  );
 
  const firstStep = () => 
    return (
      <div>
        <div className="box">
          <div className="steps">
            <ul className="nav">
              steps.map((step, i) => 
                return (
                  <li
                    key=i
                    className=`$
                      activeStep.key === step.key ? "active" : ""
                     $step.isDone ? "done" : ""`
                  >
                    <div>
                      Step i + 1
                      <br />
                      <span>step.label</span>
                    </div>
                  </li>
                );
              )
            </ul>
          </div>
          <div className="step-component">activeStep.component()</div>
          <div className="btn-component">
            <input
              type="button"
              value="Back"
              onClick=handleBack
              disabled=steps[0].key === activeStep.key
            />
            <input
              type="button"
              value=
                steps[steps.length - 1].key !== activeStep.key
                  ? "Next"
                  : "Submit"
              
              onClick=handleNext
            />
          </div>
        </div>
        <Form className="column justify-content-center page">
          <Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">
            <Form.Label>Benzersiz Ad</Form.Label>
            <Form.Control as="textarea" rows=3 />
          </Form.Group>
          <Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">
            <Form.Label>Görünen İsim</Form.Label>
            <Form.Control as="textarea" rows=3 />
          </Form.Group>
          <Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">
            <Form.Label>Oyun Açıklaması</Form.Label>
            <Form.Control as="textarea" rows=3 />
          </Form.Group>
          <Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">
            <Form.Label>Oyun Türü</Form.Label>
            <Form.Control as="textarea" rows=3 />
          </Form.Group>
          <Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">
            <Form.Label>Bireysel</Form.Label>
            <Form.Control as="textarea" rows=3 />
          </Form.Group>
          <Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">
            <Form.Label>Oyun Durumu</Form.Label>
            <Form.Control as="textarea" rows=3 />
          </Form.Group>
          <Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">
            <Form.Label>Açık</Form.Label>
            <Form.Control as="textarea" rows=3 />
          </Form.Group>
        </Form>
        <Link to="/PageTwo">
          <Button className="button" variant="outline-secondary">
            İ L E R İ
          </Button>" "
        </Link>
      </div>
    );  
  

  const handleNext = () => 
    if (steps[steps.length - 1].key === activeStep.key) 
      alert("You have completed all steps.");
    

    setActiveStep(steps[index + 1]);
  ;

  const handleBack = () => 
    const index = steps.findIndex((x) => x.key === activeStep.key);
    if (index === 0) return;

    setSteps((prevStep) =>
      prevStep.map((x) => 
        if (x.key === activeStep.key) x.isDone = false;
        return x;
      )
    );
    setActiveStep(steps[index - 1]);
  ;

  ;

export default NewGame;

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

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

谢谢！

【参考方案1】：

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

交换第 6 行和第 7 行。

【讨论】：

这是我交换两行后得到的结果 × ReferenceError: Cannot access 'firstStep' before initialization NewGame C:/Users/SAMSUNG/src/pages/NewGame.js:11 8 |关键：“第一步”，9 |标签：“我的第一步”，10 |已完成：真，> 11 |组件：第一步，| ^ 12 | , 13 | ]); 14 | const [activeStep, setActiveStep] = useState(steps[0]);

交换两行是个坏主意，因为第 7 行继续到第 8 - 14 行...将行移到下一个可用行可能是更好的建议。

实际上这正是我所做的 const [steps, setSteps] = useState([ key: "firstStep", label: "My First Step", isDone: true, component: firstStep, , ]); const [activeStep, setActiveStep] = useState(steps[0]);我不仅换了两行我做了 shifitng

@HazalKaya 新的 ReferenceError 告诉您完全相同的问题，但使用了 firstStep 变量。解释此错误消息对于开发人员来说是一项重要技能，我建议您仔细研究此错误消息，直到您理解它的含义。