在本機反應中獲取無效的鈎子調用

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();
  }, []);

}