我正在尝试创建一个小的表格，该表格汇总了添加功能的各种成本。我正在通过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;
答案 0 :(得分：1)
只需在功能组件的第一行声明您的状态变量，因为useEffect也会在第一行运行，并且它没有任何状态变量，因此会产生错误。
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;
答案 1 :(得分：0)
有人可以解释为什么我在尝试使用set状态时在调用字符串帐户对象时遇到错误
useEffect(() => {
if (accounts === "cash") {
setPrice(price * 1.1);
} else if (accounts === "accrual") {
setPrice(price * 1.2);
}
}, [accounts, setPrice]);
<input
type='radio'
name='accounts'
value='cash'
checked={accounts === "cash"}
onChange={onChange}
/>
Cash{" "}
</span>
<span className='text-center bg-danger px-3'>
<input
type='radio'
value='accrual'
name='accounts'
checked={accounts === "accrual"}
onChange={onChange}
/>
Accrual
其他等式
setAccounts({ ...accounts, [e.target.name]: e.target.value });
const [accounts, setAccounts] = useState("");