【发布时间】：2020-03-09 12:43:42
【问题描述】：
我正在尝试创建一个小表格来总结添加功能的各种成本。我正在通过 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;
【问题讨论】：
-
将你的
useState's 移动到函数/组件的顶部，你需要为你的一些useEffect's 定义这些变量 -
好吧是有道理的，并解决了这个错误..工作表仍然无法正常工作，导致它读取我表单上的值错误
标签： reactjs