React中useEffect无法使用state变量number_of_rooms过滤数组求助

先排查最常见的数据类型不匹配问题：

• 直接在useEffect里打印变量类型，确认两边是否一致：

  useEffect(()=>{    
    console.log(typeof number_of_rooms); // 查看当前state的类型
    test.forEach(item => console.log(typeof item.numberofrooms)); // 查看数组元素的类型
    const neww = test.filter(property => property.numberofrooms === number_of_rooms);
    console.log(neww)
  },[number_of_rooms]);
  

• 如果类型不一样（比如一个是字符串、一个是数字），统一类型后再比较：

  // 转成数字比较
  const neww = test.filter(property => property.numberofrooms === Number(number_of_rooms));
  // 或者转成字符串比较
  const neww = test.filter(property => property.numberofrooms.toString() === number_of_rooms);
  

然后处理初始值的问题：

• 因为state初始值是null，第一次组件渲染时useEffect会执行，此时过滤条件是null，结果肯定为空。可以加个判断，只有当number_of_rooms有效时才执行过滤：

  useEffect(()=>{    
    if (number_of_rooms === null) return; // 初始值时跳过
    const neww = test.filter(property => property.numberofrooms === number_of_rooms);
    console.log(neww)
  },[number_of_rooms]);
  

最后确认更新state的方式：

• 确保其他组件调用setRoom时，传入的值类型和数组里numberofrooms的类型一致。比如数组里是数字5，就调用setRoom(5)；如果是字符串"5"，就调用setRoom("5")。

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