React基于setState实现对象数组条件更新：匹配修改、无匹配新增

核心调整思路 #

• 原有map逻辑仅返回与原数组长度一致的结果，只能完成已存在条目的更新，无法触发新条目追加
• 需先判断当前订阅列表中是否存在name字段与传入symbol相等的条目
• 匹配到条目则执行原有更新逻辑，未匹配到则将新条目追加到数组末尾
• 所有操作均返回新数组，符合React状态更新的不可变要求

基础实现版（逻辑直观易读） #

适合订阅列表数据量较小的场景，代码可读性更高：

const [subscriptions, setSubscriptions] = useState([{name: 'xbtusd', price: ''}])

const updateSubscription = (symbol, price) => {
  setSubscriptions((prevSubscriptions) => {
    // 判断是否存在匹配的条目
    const hasMatched = prevSubscriptions.some(instrument => instrument.name === symbol)
    if (hasMatched) {
      // 存在则走原有map更新逻辑
      return prevSubscriptions.map((instrument) =>
        instrument.name === symbol
          ? { ...instrument, price }
          : instrument
      )
    }
    // 不存在则追加新条目
    return [...prevSubscriptions, { name: symbol, price }]
  })  
}

性能优化版（单次遍历） #

适合订阅列表条目较多的场景，仅遍历一次数组，避免两次遍历的性能损耗：

const updateSubscription = (symbol, price) => {
  setSubscriptions((prevSubscriptions) => {
    let hasMatched = false
    const updatedList = prevSubscriptions.reduce((acc, instrument) => {
      if (instrument.name === symbol) {
        hasMatched = true
        acc.push({ ...instrument, price })
      } else {
        acc.push(instrument)
      }
      return acc
    }, [])
    // 遍历完成后无匹配则追加新条目
    if (!hasMatched) updatedList.push({ name: symbol, price })
    return updatedList
  })
}

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