React.JS 中的无效 Hook 调用答案

【问题标题】：Invalid Hook calls in React.JSReact.JS 中的无效 Hook 调用
【发布时间】：2019-09-18 08:05:29
【问题描述】：

import React, {Component, useState, useEffect} from 'react';
import {connect} from 'react-redux';
import BigHeader from './bigHeader';
import SmallHeader from './smallHeader';

function isSmall() {
    if(this.windowWidth < 1307){
        return true;
      }
      return false;
}

const [windowWidth, setWindowWidth] = useState(window.innerWidth);

function determineWidth() {
    const width = window.innerWidth;
    setWindowWidth(width);
    isSmall(width);
}

useEffect(() => {
    window.addEventListener("resize", determineWidth);

    return function() {
        window.removeEventListener("resize", determineWidth);
    }
})
class Header  extends Component {

    render() {
        return this.isSmall() ? <SmallHeader/> : <BigHeader/> 
    }
}

// export default connect(mapStateToProps, page);
export default Header;

我从这一行收到错误const [windowWidth, setWindowWidth] = useState(window.innerWidth);

我试图在屏幕为

【问题讨论】：

Hooks 通常需要成为功能组件的一部分
钩子必须由功能组件调用。

标签： reactjs react-hooks react-lifecycle-hooks

【解决方案1】：

如果你想使用钩子（包括自定义钩子），你必须从功能组件中使用它们，这里是你的带有自定义钩子的代码，而 Header 是一个功能组件而不是一个类：

import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import BigHeader from './bigHeader';
import SmallHeader from './smallHeader';

const useWindowWidth = () => {
  function determineWidth() {
    const width = window.innerWidth;
    setWindowWidth(width);
  }
  const [windowWidth, setWindowWidth] = useState(
    window.innerWidth
  );
  useEffect(() => {
    window.addEventListener('resize', determineWidth);

    return function() {
      window.removeEventListener('resize', determineWidth);
    };
  },[]);
  return windowWidth;
};

function useIsSmall() {
  const windowWidth = useWindowWidth();
  if (windowWidth < 1307) {
    return true;
  }
  return false;
}

function Header(props) {
  const isSmall = useIsSmall();
  return isSmall ? <SmallHeader /> : <BigHeader />;
}

// export default connect(mapStateToProps, page);
export default Header;

【讨论】：

【解决方案2】：

你不能在函数外使用hooks。

能否请您在函数中移动代码const [windowWidth, setWindowWidth] = useState(window.innerWidth);然后尝试一下。

【讨论】：

【解决方案3】：

尝试使用 React Native 中的Dimensions，这段代码应该可以工作：也可以在每次调用isSmall()函数时更新windowWidth值：

import { Dimensions } from 'react-native'
const windowWidth = Dimensions.get('window').width;
const windowheight = Dimensions.get('window').height;

function isSmall() {
if(this.windowWidth < 1307){
    return true;
  }
  return false;
}

class Header  extends Component {

render() {
    return this.isSmall() ? <SmallHeader/> : <BigHeader/> 
    }
}

// export default connect(mapStateToProps, page);
export default Header;

【讨论】：

【解决方案4】：

根据 React 文档：Hooks，hooks 只能在功能组件内部使用

大概是这样

import React, { useState } from 'react';
import { Dimensions } from 'react-native'
const windowWidth = Dimensions.get('window').width;
const windowheight = Dimensions.get('window').height;

function Example() {

  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  //Return something
  return (
    <div>

    </div>
  );
}

【讨论】：