reactjs - ReferenceError:在初始化之前无法访问“步骤”
问题描述
我正在尝试在 ReactJS 中制作向导。我正在关注一个在线教程,但是他们没有解释如何通过多页来制作它。所以我尝试了自己的方法来应用它,但它没有奏效。
这是第一页的代码:
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",
谢谢!
解决方案
错误告诉您该变量steps
在第 7 行初始化,但您在第 6 行使用它来设置activeStep
状态变量的初始值。您不能在初始化之前使用变量,因此会出现消息“初始化之前无法访问'步骤'”。
交换第 6 行和第 7 行。
推荐阅读
- laravel - 如何在 laravel 5.6 中找到不同用户的最大总和值?
- python - 查找数组中的最小数
- intellij-idea - Intellij:是否有使“运行任何东西”对话框内容更宽的选项或配置?
- tabs - AMP setState 在服务器中无法正常工作
- c# - 找不到与命令“dotnet-/app/Build\ClearPluginAssemblies.dll” Docker 匹配的可执行文件
- go - “i.(string)”在 golang 语法中的实际含义是什么?
- java - 在 ArrayList 中添加/删除方法与设置方法
- javascript - React 使用新项目更新列表,但 ID 可能会重复
- flutter - 从网络抖动加载图像的更好方法
- c++ - 在类的公共方法中调用私有方法