React Native：比之前的渲染呈现更多的钩子

Question

我在实施 gethomeid useState 后收到此错误并且无法理解我尝试了不同的方法但没有任何效果

import React, {useEffect, useState} from 'react';
import {
  StyleSheet,
  View,
  Image,
  Text,
  TouchableOpacity,
  Button,
} from 'react-native';
import {windowWidth, windowHeight} from '../utils/Dimentions';
//components
import EmptyContainer from '../components/EmptyContainer';
import Header from '../components/Header';
import TopTabs from '../components/Tabs';

//redux
import {getHomeData} from '../action/homedata';
import {connect} from 'react-redux';
import propTypes from 'prop-types';

// to render empty container

const Home = ({getHomeData, homeState, userDetails}) => {
  const [gethomeid, setGethomeid] = useState(null);
  if (userDetails) {
    useEffect(() => {
      getHomeData('123456');
    }, []);
  }
  if (homeState.data != null && userDetails && gethomeid != null) {
    console.log(homeState.data);
    return (
      <View style={{flex: 1}}>
        <Header username={userDetails.name.split(' ')[0]} />
        <TopTabs roomdata={homeState.data.roomMapper} />
      </View>
    );
  } else {
    return (
      <View>
        <EmptyContainer />
      </View>
    );
  }
};

const mapStateToProps = state => ({
  homeState: state.data,
  userDetails: state.auth.user,
});

const mapDispatchToProps = {
  getHomeData,
};

Home.propTypes = {
  getHomeData: propTypes.func.isRequired,
  homeState: propTypes.object.isRequired,
  userDetails: propTypes.object,
};

export default connect(mapStateToProps, mapDispatchToProps)(Home);

我正在尝试加载 2 个按钮，这些按钮会将点击的数据传递给 gethomeid，但我无法解决这个错误

错误快照：-

Answer 1

您正在有条件地调用 useEffect 挂钩。这打破了钩子的规则。您可以将条件 移动到 挂钩回调中。

useEffect(() => {
  if (userDetails) {
    getHomeData('123456');
  }
}, []);

您可能还应该添加 linter 可能会抱怨的任何缺少的依赖项，例如 userDetails 和 getHomeData。

useEffect(() => {
  if (userDetails) {
    getHomeData('123456');
  }
}, [getHomeData, userDetails]);

React Native：比之前的渲染呈现更多的钩子

React Native : Rendered more hooks than during the previous render

reactjs

react-native

react-redux

react-hooks