React Native 对象数组过滤耗时 useState变量首次更新不生效问题求助

你的问题和filter耗时完全无关，50条数据的过滤操作在JS中仅需毫秒级即可完成，不会引发延迟更新的问题，异常来自两处明显的代码逻辑错误：

• 过滤结果未赋值：Array.filter是纯函数，不会修改原数组，会返回符合条件的新数组，你的补充代码中执行了hoursList.filter()后没有将返回值赋值给myHoursList，导致该变量永远是初始化的空数组
• 时间格式解析错误：解析开门时间的moment格式字符串写为了"HH:m"，缺少了一位分钟的格式符，会导致第一次解析出来的时间为无效值，过滤条件永远不成立，所以拿不到正确结果

直接修正两处代码错误即可，修复后的getHoursList代码如下：

const [customHourList, setCustomHourList] = useState([])

const getHoursList = async (day: number) => {
  const response = await fetch(`SERVER_URL`);
  const json = await response.json();
  if (!json.error) {
    const timeLapses = json.result[0].schedule[day].lapses.map(time => {
      const closeTime = `${time.close.hour}:${time.close.minute}`;
      const openTime = `${time.open.hour}:${time.open.minute}`;
      return { closeTime, openTime };
    });
    // 1. 将filter返回的结果赋值给myHoursList
    // 2. 修正moment的格式字符串为HH:mm
    const myHoursList = hoursList.filter(interval => {
      const start = moment(interval.startTime, "HH:mm")
      const end = moment(interval.endTime, "HH:mm")
      const to = moment(timeLapses[0].closeTime, "HH:mm")
      const from = moment(timeLapses[0].openTime, "HH:mm")
      return from <= start && end <= to
    })
    setCustomHourList(myHoursList);
  }
}

如果修复后仍然存在更新不及时的问题，可检查以下两点：

• 确认hoursList变量是否是最新值：如果hoursList是通过其他异步接口获取的状态，要确保调用getHoursList的时候，hoursList已经完成赋值，没有出现闭包捕获旧值的问题
• 状态更新后的渲染逻辑：确认使用customHourList的视图逻辑没有做额外的条件判断拦截了渲染

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