React Hooks 表单提交状态更新失效？useEffect 陷阱与解决方案

2024-11-09 10:10:24

表单提交与状态更新：useEffect 引起的误解

开发者在使用 React Hooks，特别是 useState 和 useEffect 时，有时会遇到状态更新不如预期的情况。一个常见的场景是：表单提交后，状态值似乎没有变化，这可能导致后续操作出现问题。这个问题通常与 useEffect 的依赖数组有关，并非 SWR 导致的。让我们深入分析原因并提供解决方案。

问题分析：`useEffect` 依赖与状态更新时机

在提供的代码示例中，问题在于对 useEffect 的理解。useEffect 的第二个参数是一个依赖数组。当依赖数组为空数组 [] 时，useEffect 只会在组件首次渲染后执行一次。

代码中，setMovies(result) 确实更新了 movies 状态，但是这个更新发生在 useEffect 执行之后。由于 useEffect 只执行一次，所以 console.log("movies =", movies) 打印的仍然是初始状态 initialValue。这并不是 setMovies 失效，而是打印时机的选择问题。

解决方案一：利用 useEffect 的返回值进行清理

为了在每次获取新数据后更新界面，你需要移除 useEffect 的依赖数组，或者将其设置为 [movies] 。但这可能会导致无限循环。因此，最好利用 useEffect 的返回值进行清理，避免潜在问题。

const StateSelector = () => {
  const initialValue = []; // 空数组作为初始值

  const [movies, setMovies] = useState(initialValue);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let ignore = false; // 用于避免 setState on unmounted component 的标志

    (async function() {
      try {
        setLoading(true);
        const result = await fetch("http://192.168.1.164:5000/movies/display").then(res => res.json()); 
        if (!ignore) { //  确保组件仍然挂载
            setMovies(result.data.result);
            setLoading(false);
        }
      } catch (e) {
        if (!ignore) {
          console.error(e);
          setLoading(false);
        }
      }
    })();

    return () => { ignore = true; }; // 清理函数，在组件卸载时设置 ignore 为 true
  }, []);

    // loading 状态控制 UI 展示,避免显示旧数据.
    if (loading) return <p>Loading...</p>
  return (
    <div>
    {movies.map(movie => (
        <p key={movie.id}>{movie.name}</p>
    ))}
    </div>
);

};

// ...其他代码不变

设置 Loading 状态 : 引入 loading 状态，用于指示数据加载状态。这能防止组件在数据获取完成前渲染旧数据。
清除副作用 : 通过在 useEffect 中返回一个函数，实现在组件卸载时设置 ignore 为 true。这可以避免在组件卸载后更新状态的错误。

解决方案二：使用更合适的 `useEffect` 依赖

如果您需要根据某个值的变化重新获取数据，可以将该值添加到 useEffect 的依赖数组中。

const StateSelector = () => {
    // ... 省略部分代码 ...
    const [filter, setFilter] = useState("");

    useEffect(() => {

        (async () => {
            try {
                 // ...代码同上
                 const response = await fetch(`http://192.168.1.164:5000/movies/display?filter=${filter}`).then(res=> res.json());
                 // ...其余代码逻辑不变
             } catch (e) { 
                  // ...
             }

        })();


    }, [filter]); // 将 filter 添加到依赖项中，确保每次filter变动会再次获取

     // 添加筛选条件输入框：
     <input type="text" value={filter} onChange={e=>setFilter(e.target.value)} />
     // ...剩余的 JSX

};