React JS中使用filter从map渲染数组过滤多值仅生效1个问题排查

问题原因 #

你的问题核心是React的setState为异步批量更新机制：setState调用后不会立刻修改当前组件的state值，而是将更新推入队列等待批量执行。你在for循环中多次调用setState过滤时段时，每次读取的this.state.timeslots都是循环开始前的初始值，而非上一次setState修改后的值，多次更新的timeslots会互相覆盖，最终仅最后一次过滤操作生效，因此只能删掉一个时段。

修复方案 #

先在内存中完成所有过滤逻辑，再一次性更新state即可，修改后代码如下：

handleDayClick(day) {
    // 先拿到完整的初始时段列表
    let availableTimeslots = [...this.state.timeslotsReset];
    // 筛选出当前选中日的所有禁用时段
    const currentDayDisabled = this.state.timeslotsDisabled.filter(item => {
        const itemDate = new Date(item.date);
        return itemDate.getFullYear() === day.getFullYear() 
            && itemDate.getMonth() === day.getMonth() 
            && itemDate.getDate() === day.getDate();
    });
    // 一次性过滤所有禁用时段
    availableTimeslots = availableTimeslots.filter(item => 
        !currentDayDisabled.some(disabled => disabled.time === item)
    );
    // 一次性更新state
    this.setState({
        timeslots: availableTimeslots,
        selectedDay: day
    });
}

该方案同时避免了循环内频繁调用setState导致的不必要重渲染，性能和可读性都更优。

内容的提问来源于stack exchange，提问作者Joppe Meijers