React项目报错：Uncaught TypeError: keeps.map is not a function 求助

问题根源 #

• 状态更新逻辑错误：App组件中setKeeps(...keeps, e)的写法错误，直接使用展开运算符会将原数组的元素拆解为独立参数传递给setKeeps，导致keeps状态从数组变为单个字符串（原数组第一个元素），后续调用map方法时自然触发类型错误。
• 输入值获取错误：Input组件中e.target.value指向的是form元素，而form没有value属性，因此传递给onSubmit的是undefined，即便状态更新逻辑正确，也无法添加有效内容。

修复方案 #

1. 修正App组件的状态更新逻辑 #

将setKeeps(...keeps, e)改为setKeeps([...keeps, e])，通过数组展开运算符创建新数组，保留原数组元素的同时添加新条目：

import React, { useState } from "react";
import Input from "./components/Input";
import Keep from './components/Keep'

export default function App() {
  const [keeps, setKeeps] = useState(['go','do','make','sleep'])
  const keepsList = keeps.map((keep, id)=><Keep value={keep} key={id} />)
  
  const onSubmit = (newKeep) => {
    // 过滤空值，避免添加空白条目
    if(newKeep.trim()){
      setKeeps([...keeps, newKeep])
    }
  }
  
  return (
    <>
      <div className="App">
        <div className="Logo">N13G's Keeps</div>
        <Input onSubmit={onSubmit}/>
        <div className="KLmain">
          { keepsList }
        </div>
      </div>
    </>
  )
}

2. 修正Input组件的输入值获取逻辑 #

推荐两种可靠的获取方式：

方式一：通过form的elements集合获取输入值

import React from "react";

function Input ({onSubmit}) {
 const handleSubmit = (e) => {
  e.preventDefault()
  // 获取表单内第一个input元素的值
  const inputValue = e.target.elements[0].value
  onSubmit(inputValue)
  // 提交后清空输入框
  e.target.elements[0].value = ''
 }
 return (
 <>
  <form className="Icont" onSubmit={handleSubmit}>
   <input type="text" className="Iinput"/>
   <input type="submit" className="Ibut" value="Add"/>
  </form>
 </> )
}

export default Input

方式二：在Input组件内用useState管理输入值（更符合React状态管理规范）

import React, { useState } from "react";

function Input ({onSubmit}) {
 const [inputValue, setInputValue] = useState('')
 
 const handleSubmit = (e) => {
  e.preventDefault()
  onSubmit(inputValue)
  // 提交后清空输入框
  setInputValue('')
 }
 
 const handleChange = (e) => {
  setInputValue(e.target.value)
 }
 
 return (
 <>
  <form className="Icont" onSubmit={handleSubmit}>
   <input 
     type="text" 
     className="Iinput"
     value={inputValue}
     onChange={handleChange}
   />
   <input type="submit" className="Ibut" value="Add"/>
  </form>
 </> )
}

export default Input

额外说明 #

这类错误并非React Bug，几乎都是代码逻辑问题，尤其是状态更新和DOM元素值的获取环节。改用类组件无法解决问题，因为核心错误是状态更新的写法错误，与组件类型无关。

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