如何在TS React中绑定对象属性？解决类型不匹配报错

错误原因 #

你遇到的Argument of type 'string' is not assignable to parameter of type 'SetStateAction<MediaBookmarkDTO>'报错，是因为setNewBookmark需要接收**MediaBookmarkDTO类型的对象**（或返回该对象的函数），但你直接传入了输入框的字符串值，类型不匹配导致的。

正确绑定方式 #

要更新对象类型的state，需要保留原有属性的同时修改目标属性，确保传入setNewBookmark的是完整的MediaBookmarkDTO对象：

基础写法（直接更新）

针对bookmarkName输入框的正确绑定代码：

<div className="form-group col-md-4">
  <label htmlFor="BookmarkName">Name:* </label>
  <input 
    type="text" 
    className="form-control" 
    id="BookmarkName" 
    placeholder="Name"
    value={newBookmark.bookmarkName} 
    onChange={(e) => {
      // 用扩展运算符复制原state所有属性，再覆盖目标属性
      setNewBookmark({
        ...newBookmark,
        bookmarkName: e.target.value
      });
    }} 
  />
</div>

其他属性（如bookmarkDescription、bookmarkType等）的绑定逻辑完全一致，只需替换对应的属性名即可：

// 示例：绑定描述输入框
<input 
  type="text" 
  className="form-control" 
  id="BookmarkDescription" 
  placeholder="Description"
  value={newBookmark.bookmarkDescription} 
  onChange={(e) => {
    setNewBookmark({
      ...newBookmark,
      bookmarkDescription: e.target.value
    });
  }} 
/>

函数式更新（适合依赖旧state的场景）

如果存在连续更新操作，担心state异步更新导致的旧值问题，可以使用函数式更新，基于上一次的state生成新对象：

onChange={(e) => {
  setNewBookmark(prevState => ({
    ...prevState,
    bookmarkName: e.target.value
  }));
}}

总结 #

所有输入框都需要遵循上述逻辑，确保每次调用setNewBookmark时传入的是完整的MediaBookmarkDTO对象，而非单个字符串值，即可解决类型不匹配的报错。

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