React-TypeScript项目API搜索功能onSubmit提交失效问题

两个核心逻辑错误导致功能异常：

• useEffect依赖配置错误：当前effect的依赖数组为空数组[]，仅会在组件首次挂载时执行一次，后续title状态更新不会触发接口请求。手动保存文件触发热更新时组件会被重新挂载，才会执行一次effect逻辑拉取数据，刚好拿到上一次更新的title值，就出现了“手动保存才生效”的现象。
• 对React状态更新机制理解有误：React的状态更新是异步批处理的，在onSubmit回调里执行setTitle(search)后立刻读取title，拿到的还是更新前的旧值，无法获取到刚输入的搜索关键词。

调整组件逻辑，把接口请求逻辑和状态更新解耦，表单提交只负责更新搜索关键词，由useEffect监听关键词变化自动触发请求，同时补上空搜索词的判断避免无效请求。
修复后的Search组件代码如下：

import React, { useEffect, useState } from 'react'
import SearchMovieResults from '../models/Search';
import GetMovies from '../services/GetMovie';

function Search() {
  const [search, setSearch] = useState<string>("");
  const [title, setTitle] = useState<string>("");
  const [movie, setMovie] = useState<SearchMovieResults[]>([])
  useEffect(() => {
    // 搜索词为空时清空结果，不发无效请求
    if (!title.trim()) {
      setMovie([])
      return
    }
    GetMovies(title).then(data => {
        setMovie(data);
    });
  // 将title加入依赖数组，title变化时自动执行请求
  }, [title]);

  return (
    <div>
      <form onSubmit={(e) => {
        e.preventDefault();
        setTitle(search);
        }}>
        <label htmlFor="search">SEARCH:</label>
        <input 
          type="text" 
          id="search" 
          placeholder="Type movie/tv show here" 
          onChange={(e) => setSearch(e.target.value)}
        />
        <button type="submit">SEARCH</button>
      </form>
      {movie.map((item, index) =>
        <p key={index}>{item.title}</p>
      )}
    </div>
  )
}

export default Search;

• 列表渲染不建议用数组下标作为key值，后续如果做结果排序、分页加载容易出现渲染错位问题。可以在SearchMovieResults类型定义中补充TMDB接口返回的电影唯一id字段，遍历时用key={item.id}。
• 接口地址中的{api-key}占位符需要替换为你自己申请的TMDB有效密钥，否则请求会返回权限错误。

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