useFocus 清理期间的状态变化答案

【问题标题】：State changes during useFocus cleanupuseFocus 清理期间的状态变化
【发布时间】：2021-01-03 00:00:20
【问题描述】：

我希望将对对象数组的更改发布到数据库（这些可以非常快速地添加或删除）并且我不想在数组更改时访问数据库（以避免在这样的情况下执行太多请求很短的时间）。为此，我想在用户changes screens in React Native 后“保存”这些更改。我唯一的问题是在 useEffects'clean up 期间访问我的状态时，在删除处理程序期间，我的状态按预期更改，但是当触发清理时，状态几乎会回到它的初始状态（使用 useEffect 设置）。

export const ProfileView = () => {
  const [userTags, setUserTags] = useState < EnumTags > profileData.tags;
  // TODO: Avoid data from being saved and fetched everytime a tag is removed

  useFocusEffect(
    // Fetch Tag Data
    React.useCallback(() => {
      // *** Grab data from a JS object ***

      console.log("----------------");
      console.log("Tag data fetched");
      console.log("----------------");

      const tagData = [...profileData.tags];
      setUserTags(tagData);

      // *** EXPECTED LOG: 5 ***
      // *** OUTPUT IS: 5 ***
      console.log("- Before: ", userTags.length);

      return () => {
        // Save changes
        // *** DURING CLEAN UP, SAVE DATA IN THE JS OBJECT
        console.log("----------------");
        console.log("Save changes");
        console.log("----------------");

        // *** EXPECTED OUTPUT IF A ELEMENT IS REMOVED: NOT 5 ***
        // *** OUTPUT: 5, same has initial state
        console.log("~ Tags: ", userTags.length);
        // *** ATTEMPT TO SAVE DATA
        profileData.tags = [...userTags];
        console.log("- After: ", profileData.tags.length);
      };
    }, [])
  );

  const handdleTagRemoval = (tagName: string) => {
    // *** REMOVE SELECTED ITEM, DONE USING ARRAY.FILTER
    console.log("Remove tag");

    const tags = [...userTags];
    const filteredTags = tags.filter((tagItem) => tagItem.name !== tagName);
    // profileData.tags = filteredTags;
    setUserTags(filteredTags);
    console.log("~", tagName, " was removed");
    console.log(userTags.length, " are left");
  };
};

【问题讨论】：

空依赖数组包含组件挂载时的初始组件状态。需要在依赖中添加userTags 来更新memoized 回调。此外，useCallback 不返回清理函数。你真的打算改用useEffect 吗？
我是基于useFocus 做的，这显然是 React Navigation 的 useEffect 等价物。也许我应该更新一下标题，我很抱歉。

标签： reactjs react-native use-effect use-state

【解决方案1】：

按照@Drew Reese 的建议通过添加userTags 作为依赖项解决。这意味着我要多用两次这个钩子。

 useFocusEffect(
    // Fetch Tag Data
    React.useCallback(() => {
      console.log("----------------");
      console.log("Tag data fetched");
      console.log("----------------");
      const tagData = [...profileData.tags];
      setUserTags(tagData);
      console.log("- Before: ", userTags.length);
    }, [])
  );

  useFocusEffect(
    // Save changes
    React.useCallback(() => {
      console.log("----------------");
      console.log("Save changes");
      console.log("----------------");
      console.log("~ Tags: ", userTags.length);
    }, [userTags])
  );

  useFocusEffect(
    // Post final changes
    React.useCallback(() => {
      return () => {
        // Save Final changes
        console.log("----------------");
        console.log("Post changes");
        console.log("----------------");
        console.log("~ Post Tags: ", userTags.length);
        profileData.tags = [...userTags];
        console.log("- After: ", profileData.tags.length);
      };
    }, [userTags])
  );

【讨论】：