在本机反应中获取无效的钩子调用

Question

ExceptionsManager.js:179 错误：无效的挂钩调用。 钩子只能在 function 组件的内部调用。 这可能由于以下原因之一而发生：

1. 您可能有不匹配的 React 版本和渲染器（例如 React DOM）
2. 你可能违反了 Hooks 规则
3. 你可能在同一个应用程序中有多个 React 副本

在 Playbutton 组件中出现此错误

播放按钮.js

import { useNavigation } from "@react-navigation/native";
import React, { useEffect, useState, useRef } from "react";
import { useSelector, useDispatch } from "react-redux";
import {
  View,
  Button,
  StyleSheet,
  Image,
  TouchableOpacity,
  Dimensions,
  NativeModules,
} from "react-native";

var deviceHeight = Dimensions.get("window").height;
var deviceWidth = Dimensions.get("window").width;
import useAppleFunction from "../CustomHooks/useAppleFunction";

const PlayButton = () => {
   
  useEffect(() => {
      useAppleFunction();
  }, []);

}

这是自定义挂钩 useApplefunction.js

import { StyleSheet, Text, View } from "react-native";
import React, { useEffect } from "react";
import { useSelector } from "react-redux";

const useAppleFunction = () => {
  const Playlist = useSelector((state) => state);
  console.log("reduxcheck=",Playlist);

  useEffect(() => {
    runtimer();
  }, []);

  const runtimer = () => {
     console.log("reduxcheck=1",Playlist);
  };
};

export default useAppleFunction;

const styles = StyleSheet.create({});

Answer 1

React 的错误消息信息量很大，有些是被动攻击性的，让你因为没有阅读足够的文档而感到难过。

第一条线索是“Hooks can only be called inside of a body of a function component”。 ，您正在另一个挂钩中调用您的自定义挂钩。
此外，在列出的 3 个原因中，只有一个似乎符合您的情况，它是 #2，您违反了react hooks 的规则。

因此，与其在 useEffect 中调用 useAppleFunction 挂钩，不如在顶层调用它，并将返回值（在您的情况下为无）保存到变量中。

Answer 2

钩子不需要返回任何东西，因此如果useAppleFunction应该是一个钩子，那么这很好。 但是，不应在useEffect中调用它。

这记录在这里。

为避免混淆，其他情况下不支持调用 Hooks：

不要在 class 组件中调用 Hooks。

不要调用事件处理程序。

不要在传递给 useMemo、useReducer 或 useEffect 的函数内部调用 Hooks。

由于您的钩子不返回任何内容，因此只需在useEffect之外的 JSX 组件主体调用它就足够了。 如果你的钩子实际上应该返回一些东西，那么我们可以像往常一样解构它。

备注：不再需要使用var了。 它已经过时了。 我已将其更改为const 。

这是您可以修复它的方法。

我假设的Playbutton.js应该是一个 JSX 组件。

import { useNavigation } from "@react-navigation/native";
import React, { useEffect, useState, useRef } from "react";
import { useSelector, useDispatch } from "react-redux";
import {
  View,
  Button,
  StyleSheet,
  Image,
  TouchableOpacity,
  Dimensions,
  NativeModules,
} from "react-native";

import useAppleFunction from "../CustomHooks/useAppleFunction";

const deviceHeight = Dimensions.get("window").height;
const deviceWidth = Dimensions.get("window").width;



const PlayButton = () => {
  // since this is a hook, it is not allowed to call it inside a useEffect
  useAppleFunction()
   
  useEffect(() => {
      
  }, []);

  //
}

Answer 3

是的，问题是您正尝试在 function 之外使用Dimensions ，然后出现错误。
而不是那样，您应该只在imports之后编写您的逻辑。

import { useNavigation } from "@react-navigation/native";
import React, { useEffect, useState, useRef } from "react";
import { useSelector, useDispatch } from "react-redux";
import {
  View,
  Button,
  StyleSheet,
  Image,
  TouchableOpacity,
  Dimensions,
  NativeModules,
} from "react-native";
import useAppleFunction from "../CustomHooks/useAppleFunction";

const PlayButton = () => {
var deviceHeight = Dimensions.get("window").height;
var deviceWidth = Dimensions.get("window").width;
   
  useEffect(() => {
      useAppleFunction();
  }, []);

}