React+TypeScript项目中使用e.target.value触发TS报错如何解决

你的报错本质是状态类型与赋值类型不兼容，具体冲突点如下：

• 你给search状态声明的类型是iMovies['movie']，初始值为数组，这个类型应当是用来存储电影列表数据的集合类型
• e.target.value是输入框返回的字符串（string）类型，将字符串直接赋值给需要数组/电影对象集合的状态，TypeScript会直接抛出类型不匹配的错误
  另外你当前写的onChange函数多声明了一个无意义的value入参，原生input的change事件只会传递事件对象e一个参数，多余的参数可以直接删除，e.preventDefault()对于输入框change事件也没有作用，可以删掉。

1. 拆分两个状态分别管理搜索关键词和返回的电影列表：

// 存储用户输入的搜索关键词，类型声明为string
const [searchKeyword, setSearchKeyword] = useState<string>('')
// 存储搜索接口返回的电影列表，沿用你原本的类型定义
const [movieList, setMovieList] = useState<iMovies['movie']>([])

2. 调整onChange函数只用来更新搜索关键词：

const onChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
  setSearchKeyword(e.target.value)
}

3. 触发搜索操作时（比如点击搜索按钮、输入防抖结束），将searchKeyword作为请求参数调用电影API，拿到返回结果后更新电影列表状态即可：

// 搜索请求示例
const handleSearch = async () => {
  const response = await 你的电影API请求方法({
    query: searchKeyword
  })
  setMovieList(response.data)
}

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