我正在React上开发一个应用程序,我需要在表单中添加产品复选框。除了最后一个操作(标记或删除复选框)没有转到服务器(错误不在服务器,我单独测试了它)之外,所有操作都正常运行。下面是复选框的输出:
<Form.Group className="mb-3">
<Form.Label>Товары</Form.Label>
{prodsl.map((emp, index) =>
<div className="mb-3">
<Form.Check
type='checkbox'
value={emp.id}
name='pp'
checked={checkedState[index]}
onChange={() => handleOnChange(index)}
/>
{emp.name}
</div>
)}
</Form.Group>
下面是处理程序(checkedState -复选框状态的数组):
const [prods, setProd] = useState([])
const [checkedState, setCheckedState] = useState(
new Array(555).fill(false)
);
const handleOnChange = (position) => {
const updatedCheckedState = checkedState.map((item, index) =>
index === position ? !item : item
);
setCheckedState(updatedCheckedState);
let arr = []
const updatedProd = checkedState.map((item, index) => {
if (item) {
arr = [...arr, index]
}
}
);
setProd(arr);
};
送出表单行程程式:
const newOrder = async () => {
const response = await addOrder(prods, client, emp, d1, d2)
stat++;
}
我试图在发送之前做一个单独的检查,我试图在发送到一个随机复选框之前调用该函数,这样这个更改将是最后一次,不会被计数。
1条答案
按热度按时间icnyk63a1#
react中的Set状态是异步的。这意味着在setstate之后,你的值不会立即更新。
要解决此问题,您有两个选项。
1.使用updatedCheckedState变量设置您的产品:
1.将逻辑移至useEffect:
建议使用
arr.push(index)
而不是arr = [...arr, index];