React表单提交时出现TypeError: .map is not a function问题求助

错误原因 #

提交时报TypeError: .map is not a function的核心问题是你在toggleAv函数里更新availableSlots的方式完全错误：

• 你直接将...availableSlots和selectedSlot.available = false作为参数传给setAvailableSlots，这会导致availableSlots被设置为原数组的第一个元素（setState只取第一个参数作为新状态），后续它不再是数组，自然无法调用map方法。
• 同时你直接修改了selectedSlot的属性，违反了React状态不可变的原则，会导致状态更新异常。

正确实现方式 #

要修改数组中指定元素的属性，必须通过创建新数组的方式更新状态，推荐使用map遍历原数组，找到目标元素时返回修改后的新对象，其他元素保持不变：

import { useState } from 'react'

function App() {
  const [time, setTime] = useState("")
  const [availableSlots, setAvailableSlots] = useState([
    {value: '17:00', available: true},
    {value: '18:00', available: true},
    {value: '19:00', available: true},
    {value: '20:00', available: true},
    {value: '21:00', available: true},
    {value: '22:00', available: true}
  ])

  const toggleAv = () => {
    // 函数式更新确保获取最新状态值
    setAvailableSlots(prevSlots => 
      prevSlots.map(item => {
        if (item.value === time) {
          // 返回新对象，不修改原状态
          return {...item, available: false}
        }
        return item
      })
    )
  }

  const handleSubmit = (e) => {
    e.preventDefault();
    toggleAv()
  }

  return (
    <>
      <form onSubmit={handleSubmit}>
        <select 
          name="time" 
          id="time" 
          value={time} 
          onChange={(e) => setTime(e.target.value)}
        >
          {availableSlots.map((item, key) => {
            return <option key={key} value={item.value}>{item.value}</option>
          })}
        </select>
        <input type="submit" value="Submit" />
      </form>
    </>
  )
}

export default App

关于你的疑问 #

• 是否需要替代find？：find本身没问题，但你用它直接修改原状态的做法错误。上面的实现用map更直接，因为我们需要遍历整个数组生成新数组。
• 为什么不能用filter？：filter的作用是筛选数组元素，返回符合条件的子集，它无法用来修改元素的属性，所以不适合你的需求。

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