React数组filter返回空数组异常排查（条件应为true时）

这问题确实有点让人摸不着头脑——明明逻辑上!toRemove.includes(dest)肯定是true（毕竟toRemove是空数组），filter应该保留唯一的元素，结果却得到空数组，偏偏直接在控制台打印filter结果又能得到正确的非空数组。结合你提到的React状态场景，十有八九是React状态更新的异步特性在搞鬼，或者是你执行代码的时机不对。

核心原因：React的setState是异步批量更新的 #

如果你是在调用setState修改destinations或者相关状态之后，立刻执行这段过滤代码，那问题就出在这儿了：React并不会在你调用setState之后立刻更新this.state，而是会把状态更新请求放入队列，等到合适的时机再批量更新。这意味着你执行过滤代码时，this.state.destinations还是更新前的旧值（比如可能是空数组），自然过滤后得到的也是空数组。

而你直接在控制台执行console.log(...)的时候，React已经完成了状态更新，此时this.state.destinations是你预期的那个包含单个对象的数组，所以打印结果正常。

其他可能性（你的场景概率较低，可排查） #

虽然你说toRemove是空数组，includes的判断逻辑应该没问题，但还是可以确认一下：数组的includes方法是用**严格相等（===）**来匹配元素的。如果destinations里的对象和某个潜在的toRemove元素是内容相同但引用不同的对象，includes会返回false，但你的场景里toRemove是空数组，所以这个情况可以排除。

解决方案 #

1. 把逻辑放在setState的回调函数里
   setState的第二个参数是一个回调函数，会在状态更新完成、组件重新渲染后执行，这里能拿到最新的this.state：

   // 假设你之前有修改状态的操作
   this.setState({ destinations: [yourDestObject] }, () => {
     // 这里的this.state是最新的
     const destUpdate = this.state.destinations.filter(dest => !toRemove.includes(dest));
     // 在这里处理destUpdate，比如赋值或者进一步操作
   });
   

2. 使用函数式更新获取最新状态
   如果你的过滤逻辑需要基于当前最新的状态来执行，可以用函数式的setState，它会接收上一个状态作为参数，确保你拿到的是最新值：

   this.setState(prevState => {
     const destUpdate = prevState.destinations.filter(dest => !toRemove.includes(dest));
     // 如果需要把destUpdate存入状态，就返回对应的对象
     return { destUpdate };
   });
   

3. 排查代码执行时机
   在执行过滤代码前，先打印当前的this.state.destinations和toRemove，确认它们的数值是否符合预期：

   console.log('当前destinations:', this.state.destinations);
   console.log('当前toRemove:', toRemove);
   const destUpdate = this.state.destinations.filter(dest => !toRemove.includes(dest));
   console.log('过滤结果:', destUpdate);
   

   这样就能直观看到执行过滤时的状态是不是你想要的，快速定位问题。

总的来说，这种“代码里结果不对，控制台打印却正常”的情况，在React里几乎都是异步状态更新导致的——控制台打印的是引用类型的最终状态，而代码执行时拿到的是旧的状态快照。

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