使用 useRecoilValue 时 React Native 无效的钩子调用

问题描述

我在使用 useRecoilValue 时收到错误 Invalid hook call。我使用这个钩子有错吗？那么我该如何解决这个问题？

List.fn.js

import { Alert,AsyncStorage } from "react-native";
import { useRecoilValue } from "recoil";
import { listDataViewer } from "../State";

const ListFunction = (listName) => {
    const listID = Date.parse(new Date());
    const newListData = {
      "ID": listID,"Name": listName
    };
    const list = useRecoilValue(listDataViewer);
    if (JSON.stringify(list) == "null"){
      try {
        AsyncStorage.setItem('list',JSON.stringify([list]));
      } catch (error) {
        console.log(error);
      }
    } else {
        try {
          AsyncStorage.setItem('list',JSON.stringify([newListData,...list]));
        } catch (error) {
          console.log(error);
        }
      }
    }
}

解决方法

您只能在 React 组件中使用钩子，但您是在常规函数中调用它。 React 无法处理函数组件之外的钩子。 有关钩子规则的更多信息，请查看官方文档：https://reactjs.org/docs/hooks-rules.html#only-call-hooks-from-react-functions