使用OnChange事件更新文本框值失败，请求技术排查

核心问题：输入框无法编辑的原因 #

你的输入框value绑定的是cookies数组里的原始数据（比如cookie.name），但onChange事件更新的是独立的postdata状态，两者没有关联。所以输入时，输入框的显示值始终是原始的cookies数据，不会跟着输入内容变化。

解决方案 #

1. 维护可编辑的数据源状态 #

直接基于cookies数组维护可编辑的状态，让每个输入框的value和更新逻辑对应到具体记录：

const [cookies, setCookies] = useState([]);

// 初始化数据
useEffect(() => {
  populateCookieData();
}, []);

async function populateCookieData() {
  const response = await fetch('cookie/GetAllCookies');
  const data = await response.json();
  setCookies(data);
}

// 处理输入变化，传入当前记录id定位更新项
const handleInput = (event, cookieId) => {
  const { name, value } = event.target;
  setCookies(prevCookies => 
    prevCookies.map(cookie => 
      cookie.id === cookieId 
        ? { ...cookie, [name]: value } 
        : cookie
    )
  );
}

// 渲染部分
{cookies.map(cookie =>
  <form key={cookie.id}>
    <input type="text" name="id" onChange={(e) => handleInput(e, cookie.id)} value={cookie.id} />
    <input type="text" name="name" onChange={(e) => handleInput(e, cookie.id)} value={cookie.name} />
    <input type="text" name="desc" onChange={(e) => handleInput(e, cookie.id)} value={cookie.desc} />
    <input type="text" name="price" onChange={(e) => handleInput(e, cookie.id)} value={cookie.price} />
    <input type="submit" />
  </form>
)}

2. 针对你疑问的解答 #

• OnChange事件问题：原事件逻辑本身无错，但未关联到输入框绑定的数据源，导致显示不更新。调整后通过传入记录ID，能精准更新对应的数据项。
• 是否需要传入记录ID：是的，因为存在多条记录，必须通过ID区分要修改的具体项，否则无法定位更新目标。
• UseEffect触发问题：你的useEffect依赖是空数组[]，只会在组件首次挂载时执行一次，修改输入框不会触发它，这部分逻辑是正常的，不用担心重复加载数据。

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