React项目中li元素值被输入内容覆盖的问题求助

你的问题核心是生成列表项时没有使用数组中存储的条目值，而是直接绑定了当前的输入框状态form，所以每次输入框内容变化，所有已生成的<li>都会同步显示最新的form值。另外还有几个小问题需要修正：

具体问题点 #

• 列表渲染错误：tobuy.map((i) => <li key={i}>{form}</li>) 这里用了当前的form状态，应该用循环项本身{i}来显示存储的条目内容
• 状态声明不规范：let [tobuy, setTobuy] = useState([]) 应该用const，React状态变量本身不会被直接赋值，更新完全依赖setter函数
• 状态更新有风险：setTobuy([...tobuy, form]) 直接依赖外部状态，在频繁更新场景下可能获取到旧状态，建议用函数式更新获取最新状态

修复后的完整代码 #

import './App.css';
import { useState } from 'react'; // 补充原代码遗漏的useState导入

function App() {
  const [form, setForm] = useState("")
  const [tobuy, setTobuy] = useState([])
  // 改用循环项item作为li的内容，绑定存储的条目值
  const listOfLi = tobuy.map((item, index) => <li key={index}>{item}</li>);

  function handleSubmit(event) {
    event.preventDefault();
    // 函数式更新获取最新状态，避免状态依赖问题
    setTobuy(prevState => [...prevState, form])
    // 受控组件直接清空form状态，同步输入框内容
    setForm("")
  }

  function handleChange(event) {
    setForm(event.target.value)
  }

  return (
    <div className='page'>
      <div className='heading'>
        Shopping List
      </div>
      <div className='buy-box'>
        <div className='to-buy'>Items to buy</div>
        <form className='form' onSubmit={handleSubmit}>
          {/* 改为受控组件，绑定value确保状态完全同步 */}
          <input type="text" className='input' required onChange={handleChange} value={form}/>
          {/* 按钮改为submit类型，复用form的onSubmit逻辑即可 */}
          <button type="submit" className='button'>Add</button>
        </form>
        <div>
          {listOfLi}
        </div>
      </div>
    </div>
  );
}

export default App;

额外说明 #

1. 补充了useState的导入，原代码遗漏会导致运行报错
2. 输入框改为受控组件，绑定value={form}，确保输入框内容和React状态完全一致
3. 用index作为key（如果后续有列表项排序/删除操作，建议给每个条目生成唯一ID作为key，避免渲染异常）
4. 用setForm("")重置输入框，比event.target.reset()更适配受控组件的状态管理逻辑

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