React使用history.goBack()返回时绑定查询参数的useEffect不触发如何解决

问题根因 #

核心原因是你设置的firstRender状态拦截了返回后的请求逻辑：

• firstRender初始值为true，且只有用户触发输入的handleInputChange函数才会将其改为false
• 从详情页点击返回回到搜索页时，搜索页组件重新挂载，firstRender会重置为true，此时没有输入操作触发状态修改，useEffect第一行的if (firstRender) return null直接跳过了数据请求逻辑，自然不会加载之前的搜索结果。

可行解决方案 #

直接删除firstRender相关的所有逻辑，改为完全以URL查询参数作为唯一状态源，修改步骤如下：

1. 删除firstRender状态定义、所有赋值逻辑，以及useEffect里对应的判断拦截
2. 给输入框绑定value属性，组件挂载/URL变化时自动同步URL里的搜索词到输入框
3. 将showMovieList、showPagination这类展示状态的控制逻辑放到URL变化的监听里，不要和输入操作绑定，避免状态和URL不同步

核心修改代码示例

export default function SearchPage() {
  const classes = useStyles();
  const history = useHistory();
  const location = useLocation();

  const [movieList, setMovieList] = useState([]);
  const [showMovieList, setShowMovieList] = useState(false);
  const [showNoResult, setShowNoResult] = useState(false)
  const [page, setPage] = useState(1);
  const [pageTotal, setPageTotal] = useState(1);
  const [showPagination, setShowPagination] = useState(false);
  // 新增搜索词状态绑定输入框
  const [searchValue, setSearchValue] = useState('')

  // 同步URL参数到本地状态和输入框
  useEffect(() => {
    const query = queryString.parse(location.search)
    const s = query.s || ''
    setSearchValue(s)
    setPage(1) // 搜索词变化时重置页码，可选
    if (s) {
      setShowMovieList(true)
      setShowPagination(true)
    } else {
      setShowMovieList(false)
      setShowPagination(false)
      setMovieList([])
    }
  }, [location.search])

  const handleInputChange = (e) => {
    const val = e.target.value.trimStart()
    const urlParams = queryString.parse(location.search);
    urlParams.s = val; 
    if(!val) {
      history.push(`/buscar`)    
    } else {
      history.push(`?${queryString.stringify(urlParams)}`);
    }
  }

  // 去掉firstRender判断，直接请求
  useEffect(() => {
    const getSearch = async () => {
      const query = queryString.parse(location.search);
      const { s } = query;
      if(!s) return;
          
      const response = await fetch(`${URL_API}/search/movie?api_key=${API_KEY}&language=es-ES&query=${s}&page=${page}` );
      const movies = await response.json();

      if (movies.results.length === 0) {
        setShowNoResult(true);
        setShowMovieList(false);
      } else {
        setShowNoResult(false);
        setPageTotal(movies.total_pages);
        setMovieList(movies.results);
      }
    }
    getSearch();
  }, [location.search, page])

  return (
    <>
      <Grid container spacing={0} alignItems="center" className={classes.bigContainer}>
        <Grid item xs={5} sm={4} md={3} className={classes.smallContainer} >
          <Logo className={classes.media} />
          <form 
            className={classes.root} 
            noValidate autoComplete="off"
            onSubmit={ (e) => e.preventDefault() }
          >
            {/* 绑定value到searchValue */}
            <TextField 
              id="outlined-basic" 
              label="Buscar pelicula..." 
              variant="outlined" 
              className={classes.textField}
              value={searchValue}
              onChange={ handleInputChange }
            />
          </form>
        </Grid>
      </Grid>
      {/* 其余渲染逻辑保持不变 */}
    </>
  )
}

其他可选排查方向 #

如果修改后仍有问题可以按以下顺序排查：

• 确认react-router-dom版本的useLocation是响应式的，v5/v6版本均符合要求，不会出现URL变化但状态不更新的问题
• 可以在useEffect开头打印location.search确认是否正常触发，排除路由配置问题
• 如果你升级到了react-router-dom v6，需要将useHistory替换为useNavigate，返回逻辑改为navigate(-1)即可

内容的提问来源于stack exchange，提问作者Federico del Rincon