React中forEach循环更新state仅添加最后一个匹配对象的问题

你当前的问题在于每次调用setTodayForcast(forcast)时，都是将单个对象直接赋值给state，之前的匹配项会被完全覆盖，因此最终只保留了最后一个符合条件的对象。以下是两种可行的解决方案：

方案一：先筛选所有匹配项，再一次性更新State（推荐） #

使用filter方法直接筛选出所有日期匹配的对象，然后一次性将整个数组设置到state中，这种方式只触发一次state更新，性能更优。

const [todayForcast, setTodayForcast] = useState([]) // 初始化为空数组
function checkDates() {
  const forcastArray = props.forcast.list
  const date = new Date();
  const currentDay = date.getDate();
  
  // 筛选所有匹配当日的预报项
  const matchedForcasts = forcastArray.filter(forcast => {
    // 用Date对象解析预报日期，避免字符串处理的潜在问题
    const forcastDate = new Date(forcast.dt_txt)
    const forcastDay = forcastDate.getDate()
    return forcastDay === currentDay
  })
  
  setTodayForcast(matchedForcasts)
}

方案二：用函数式更新累加匹配项（适合必须使用forEach的场景） #

如果一定要保留forEach循环，可通过函数式更新的方式，基于之前的state数组添加新的匹配对象，确保不会覆盖已有内容。

const [todayForcast, setTodayForcast] = useState([]) // 初始化为空数组
function checkDates() {
  const forcastArray = props.forcast.list
  const date = new Date();
  const currentDay = date.getDate();
  
  // 先清空旧数据，避免多次调用时重复累加
  setTodayForcast([])
  
  forcastArray.forEach(forcast => {
    const forcastDate = new Date(forcast.dt_txt)
    const forcastDay = forcastDate.getDate()
    
    if (forcastDay === currentDay) {
      // 函数式更新：基于之前的state创建新数组并添加当前项
      setTodayForcast(prevState => [...prevState, forcast])
    }
  })
}

关键注意点 #

1. 必须将state初始化为空数组[]，而非undefined，否则第一次更新时会因解构undefined报错。
2. 替换原有的字符串切片处理日期的逻辑，改用Date对象解析，能适配更多合法的日期格式，避免因字符串格式变化导致的匹配错误。

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