React-Bootstrap Form.Check 第一次点击时出现奇怪的行为

Question

我正在尝试对对象列表进行过滤，并创建了一个 useState 对象来保存所有过滤器的状态，如下所示：

const [filterState, setFilterState] = useState({
    "sell": false,
    "buy": false,
    "startDate": "",
    "endDate": "",
    "location": "",
    "music": false,
    "theatre": false,
    "movie": false,
});

我正在使用“react-bootstrap”中的两个 Form.Check 来更改“卖出”和“买入”字段，但它们给我带来了一些问题，filterState 对象没有在我单击 Form.Check 对象两次之前不会更改，只有 UI 正确更新，这在 filterState 对象决定选中状态时很奇怪。所以显示的内容与 filterState 对象的状态相反。

Form.Check 字段的代码：

<Form.Check checked={filterState.buy} onChange={onBuyChange} id="buy" type="checkbox" label={`Ønskes kjøpt`}/>
<Form.Check checked={filterState.sell} onChange={onSellChange} id="sell" type="checkbox" label={`Til salgs`}/>

onChange 函数：

const onSellChange = () => {
    setFilterState({
            ...filterState,
            "sell": !filterState.sell
        }
    );
    console.log(filterState);
}

const onBuyChange = () => {
    setFilterState({
            ...filterState,
            "buy": !filterState.buy
        }
    );
    console.log(filterState);
}

例子

初始状态：

点击一次不会改变状态：

再次点击更新状态，但现在是同步状态：

setFilterState前后打印

我得到的另一个奇怪的行为是在 setFilterState 之前和之后打印 filterState 给出相同的输出。在进入下一行之前是否应该更改 filterState？ setFilterState 是否以某种方式异步工作，这可以使 Form.Check 在值更改之前从中读取？

Answer 1

你能试试这个吗？

const onSellChange = () => {
    setFilterState(filterState => ({
            ...filterState,
            "sell": !filterState.sell
        })
    );
}

const onBuyChange = () => {
    setFilterState(filterState => ({
            ...filterState,
            "buy": !filterState.buy
        })
    );
}

我不能保证它会工作，但感觉问题与状态的派生方式有关，所以我让你的设置器选择了前一个称为异步的。这样 React 应该能够正确解析它。

Answer 2

解决方案

useState 的 set 函数异步运行，所以我需要 useEffect。
使用 useEffect:

useEffect(() => {
    filterEvents();
}, [filterState]);

使用与上面相同的代码，这将过滤每当 filterState 更改时显示的事件，这正是我需要的。感谢 Juho Vepsäläinen 的帮助。

React-Bootstrap Form.Check 第一次点击时出现奇怪的行为

React-Bootstrap Form.Check weird behaviour on first click

javascript

frontend

reactjs

react-bootstrap

例子

setFilterState前后打印

解决方案