reactjs 如何在React中将最后一个复选框置于useState中?

ppcbkaq5  于 2022-12-12  发布在  React
关注(0)|答案(1)|浏览(96)

我正在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++;
}

我试图在发送之前做一个单独的检查,我试图在发送到一个随机复选框之前调用该函数,这样这个更改将是最后一次,不会被计数。

icnyk63a

icnyk63a1#

react中的Set状态是异步的。这意味着在setstate之后,你的值不会立即更新。
要解决此问题,您有两个选项。
1.使用updatedCheckedState变量设置您的产品:

const handleOnChange = (position) => {
    const updatedCheckedState = checkedState.map((item, index) =>
        index === position ? !item : item
    );
    setCheckedState(updatedCheckedState);
    let arr = []
    const updatedProd = updatedCheckedState.map((item, index) => {
        if (item) {
            arr = [...arr, index]
        }
    }
    );
    setProd(arr);

};

1.将逻辑移至useEffect:

const handleOnChange = (position) => {
    const updatedCheckedState = checkedState.map((item, index) =>
        index === position ? !item : item
    );
    setCheckedState(updatedCheckedState);
};

useEffect(() => {
  let arr = []
  const updatedProd = checkedState.map((item, index) => {
    if (item) {
      arr = [...arr, index]
    }
  });
  setProd(arr);
}, [checkedState]);

建议使用arr.push(index)而不是arr = [...arr, index];

相关问题