reactjs - react js中的useState初始化错误
问题描述
我正在尝试创建一个小表格来总结添加功能的各种成本。我正在通过 useState 和 Forms 执行此操作。我使用我的 useEffect 得到的普遍错误称它是我在初始化之前尝试访问的。
所需的公式将从表单中获取输入，修改价格并将其显示在屏幕底部。这是整个函数：
import React, { Fragment, useState, useEffect } from "react";
const ToolSelect = () => {
const number = 0;
const services = [];
useEffect(() => {
setPrice(0);
}, []);
useEffect(() => {
if (type === "cash") {
setPrice(number * 1.1);
} else if (type === "accrual") {
setPrice(number * 1.2);
}
}, [number, setPrice]);
useEffect(() => {
setClicked(true);
if (plan === "starter") {
setPrice(1000);
} else if (plan === "essential") {
setPrice(2000);
}
}, [number, setPrice]);
useEffect(() => {
if (service === "tp") {
services.push(service);
setPrice(number + 800);
} else if (service === "pr") {
services.push(service);
setPrice(number + 1000);
} else if (service === "entity") {
services.push(service);
setPrice(number + 300);
} else if (service === "compliance") {
services.push(service);
setPrice(number + 2000);
}
}, [number, setPrice]);
const [price, setPrice] = useState(0);
const [plan, setPlan] = useState("");
const [type, setType] = useState("");
const [service, setService] = useState("");
const [clicked, setClicked] = useState(false);
const onChange = e => {
setPrice({ ...price, [e.target.name]: e.target.value });
setPlan({ ...plan, [e.target.name]: e.target.value });
setType({ ...type, [e.target.name]: e.target.value });
setService({ ...service, [e.target.name]: e.target.value });
};
const onSubmit = e => {
e.preventDefault();
};
return (
<Fragment>
<div className='container bg-dark grid-3'>
<div>
<ul>
<li className='card bg-success'>
<p className='lead all-center'>Package Type</p>
</li>
<li className='card bg-success'>
<p className='lead all-center'>Onboarding fee</p>
</li>
<li className='card bg-success py-2'>
<p className='lead all-center'>Accounting Type</p>
</li>
<li className='card bg-success py-3'>
<p className='lead all-center'>Additional Services</p>
</li>
</ul>
</div>
<div>
<form onSubmit={onSubmit}>
<ul>
<li className='card bg-light'>
<button
onClick={() => setPlan("starter")}
className='btn btn-primary btn-block'>
Starter
</button>
</li>
<li className='card bg-light'>
<h3 className='lead all-center'>
<span className={plan === "starter" ? "text-primary" : "text-dark"}>
$1000
</span>
</h3>
</li>
<li className='card bg-light'>
<h5 className='all-center'>1-20 Transactions Per Month</h5>
<span className='text-center px-1'>
<span className='text-center bg-success px-3'>
<input
type='radio'
name='type'
value='cash'
checked={type === "cash"}
onChange={onChange}
/>
Cash{" "}
</span>
<span className='text-center bg-danger px-3'>
<input
type='radio'
value='accrual'
name='type'
checked={type === "accrual"}
onChange={onChange}
/>
Accrual
</span>
</span>
</li>
<li className='card bg-light'>
<input
type='checkbox'
name='tp'
checked={service === "tp"}
onChange={onChange}
/>
Tax Preparation{" "}
<input
type='checkbox'
name='service'
value='pr'
checked={service === "pr"}
onChange={onChange}
/>
Payroll {" "}
<br />
<input
type='checkbox'
name='service'
value='entity'
checked={service === "entity"}
onChange={onChange}
/>
Entity Filings {" "}
<input
type='checkbox'
name='service'
value='compliance'
checked={service === "compliance"}
onChange={onChange}
/>
Compliance {" "}
</li>
</ul>
</form>
</div>
<div>
<form onSubmit={onSubmit}>
<ul>
<li className='card bg-light'>
<button
onClick={() => setPlan("essential")}
className='btn btn-danger btn-block'>
Essential
</button>
</li>
<li className='card bg-light'>
<h3 className='lead all-center'>
<span className={plan === "essential" ? "text-danger" : "text-dark"}>
$2000
</span>
</h3>
</li>
<li className='card bg-light'>
<h5 className='all-center'>20-100 Transactions Per Month</h5>
<span className='text-center px-1'>
<span className='text-center bg-success px-3'>
<input
type='radio'
name='type'
value='cash'
checked={type === "cash"}
onChange={onChange}
/>
Cash{" "}
</span>
<span className='text-center bg-danger px-3'>
<input
type='radio'
name='type'
value='accrual'
checked={type === "accrual"}
onChange={onChange}
/>
Accrual
</span>
</span>
</li>
<li className='card bg-light'>
<input
type='checkbox'
name='service'
value='tp'
checked={service === "tp"}
onChange={onChange}
/>
Tax Preparation{" "}
<input
type='checkbox'
name='service'
value='pr'
checked={service === "pr"}
onChange={onChange}
/>
Payroll {" "}
<br />
<input
type='checkbox'
name='service'
value='entity'
checked={service === "entity"}
onChange={onChange}
/>
Entity Filings {" "}
<input
type='checkbox'
name='service'
value='compliance'
checked={service === "compliance"}
onChange={onChange}
/>
Compliance {" "}
</li>
</ul>
</form>
</div>
</div>
<div className='container bg-dark grid-4'>
<div className='card bg-success'>
<p className='lead all-center'>One Time Fee</p>
</div>
<div className='card bg-light'>{price}</div>
</div>
</Fragment>
);
};
export default ToolSelect;
解决方案
Just declare your state variables on the first line of the functional component because the useEffect also runs for the first and it didn't get any state variable and that is creating the error.
import React, { Fragment, useState, useEffect } from "react";
const ToolSelect = () => {
const [price, setPrice] = useState(0);
const [plan, setPlan] = useState("");
const [type, setType] = useState("");
const [service, setService] = useState("");
const [clicked, setClicked] = useState(false);
const number = 0;
const services = [];
useEffect(() => {
setPrice(0);
}, []);
useEffect(() => {
if (type === "cash") {
setPrice(number * 1.1);
} else if (type === "accrual") {
setPrice(number * 1.2);
}
}, [number, setPrice]);
useEffect(() => {
setClicked(true);
if (plan === "starter") {
setPrice(1000);
} else if (plan === "essential") {
setPrice(2000);
}
}, [number, setPrice]);
useEffect(() => {
if (service === "tp") {
services.push(service);
setPrice(number + 800);
} else if (service === "pr") {
services.push(service);
setPrice(number + 1000);
} else if (service === "entity") {
services.push(service);
setPrice(number + 300);
} else if (service === "compliance") {
services.push(service);
setPrice(number + 2000);
}
}, [number, setPrice]);
const onChange = e => {
setPrice({ ...price, [e.target.name]: e.target.value });
setPlan({ ...plan, [e.target.name]: e.target.value });
setType({ ...type, [e.target.name]: e.target.value });
setService({ ...service, [e.target.name]: e.target.value });
};
const onSubmit = e => {
e.preventDefault();
};
return (
<Fragment>
<div className='container bg-dark grid-3'>
<div>
<ul>
<li className='card bg-success'>
<p className='lead all-center'>Package Type</p>
</li>
<li className='card bg-success'>
<p className='lead all-center'>Onboarding fee</p>
</li>
<li className='card bg-success py-2'>
<p className='lead all-center'>Accounting Type</p>
</li>
<li className='card bg-success py-3'>
<p className='lead all-center'>Additional Services</p>
</li>
</ul>
</div>
<div>
<form onSubmit={onSubmit}>
<ul>
<li className='card bg-light'>
<button
onClick={() => setPlan("starter")}
className='btn btn-primary btn-block'>
Starter
</button>
</li>
<li className='card bg-light'>
<h3 className='lead all-center'>
<span className={plan === "starter" ? "text-primary" : "text-dark"}>
$1000
</span>
</h3>
</li>
<li className='card bg-light'>
<h5 className='all-center'>1-20 Transactions Per Month</h5>
<span className='text-center px-1'>
<span className='text-center bg-success px-3'>
<input
type='radio'
name='type'
value='cash'
checked={type === "cash"}
onChange={onChange}
/>
Cash{" "}
</span>
<span className='text-center bg-danger px-3'>
<input
type='radio'
value='accrual'
name='type'
checked={type === "accrual"}
onChange={onChange}
/>
Accrual
</span>
</span>
</li>
<li className='card bg-light'>
<input
type='checkbox'
name='tp'
checked={service === "tp"}
onChange={onChange}
/>
Tax Preparation{" "}
<input
type='checkbox'
name='service'
value='pr'
checked={service === "pr"}
onChange={onChange}
/>
Payroll {" "}
<br />
<input
type='checkbox'
name='service'
value='entity'
checked={service === "entity"}
onChange={onChange}
/>
Entity Filings {" "}
<input
type='checkbox'
name='service'
value='compliance'
checked={service === "compliance"}
onChange={onChange}
/>
Compliance {" "}
</li>
</ul>
</form>
</div>
<div>
<form onSubmit={onSubmit}>
<ul>
<li className='card bg-light'>
<button
onClick={() => setPlan("essential")}
className='btn btn-danger btn-block'>
Essential
</button>
</li>
<li className='card bg-light'>
<h3 className='lead all-center'>
<span className={plan === "essential" ? "text-danger" : "text-dark"}>
$2000
</span>
</h3>
</li>
<li className='card bg-light'>
<h5 className='all-center'>20-100 Transactions Per Month</h5>
<span className='text-center px-1'>
<span className='text-center bg-success px-3'>
<input
type='radio'
name='type'
value='cash'
checked={type === "cash"}
onChange={onChange}
/>
Cash{" "}
</span>
<span className='text-center bg-danger px-3'>
<input
type='radio'
name='type'
value='accrual'
checked={type === "accrual"}
onChange={onChange}
/>
Accrual
</span>
</span>
</li>
<li className='card bg-light'>
<input
type='checkbox'
name='service'
value='tp'
checked={service === "tp"}
onChange={onChange}
/>
Tax Preparation{" "}
<input
type='checkbox'
name='service'
value='pr'
checked={service === "pr"}
onChange={onChange}
/>
Payroll {" "}
<br />
<input
type='checkbox'
name='service'
value='entity'
checked={service === "entity"}
onChange={onChange}
/>
Entity Filings {" "}
<input
type='checkbox'
name='service'
value='compliance'
checked={service === "compliance"}
onChange={onChange}
/>
Compliance {" "}
</li>
</ul>
</form>
</div>
</div>
<div className='container bg-dark grid-4'>
<div className='card bg-success'>
<p className='lead all-center'>One Time Fee</p>
</div>
<div className='card bg-light'>{price}</div>
</div>
</Fragment>
);
};
export default ToolSelect;
推荐阅读
- amazon-web-services - 如何知道 EC2 是否已注册到某个负载均衡器？
- laravel - 文件存储不工作。拉拉维尔 5
- c# - C# 询问用户需要合并的 PDF 位于哪个目录中。然后问用户什么新的子文件夹将被称为合并的 PDF 将去哪里？
- python - 如何在更新触发器之前使用 postgresql？这不执行只正确编译
- sql - 将列转换为单行并选择唯一条目
- python - list_directories_and_files 上缺少 Azure FileProperties 内容
- django - 如何在 Windows 机器上用 django 测试 celery
- spring - 何时使用基于 Spring Security 的场景
- angular - 使用 Typescript + Angular 填充日期输入
- c++ - C++终端句柄按键在屏幕上运行