如何将useEffect从组件移动到自定义钩子

文章/答案/技术大牛

发布

6回答

在HoC中使用时警告

reactjs、eslint、react-hooks

我已经创建了一个高阶组件，它应该为我的组件添加一些额外的功能。然而，当我在这个组件中使用react时，我会得到下面的eslint警告。React "React.useEffect“不能在回调中调用。必须在React函数组件或自定义React函数中调用。(反应钩/钩规则) 我为什么要收到这个警告？在HoC中使用钩子被认为是不好的做法吗？const Hello = props => <p>Greetings {props.name

浏览 7提问于2019-05-24得票数 20

回答已采纳

2回答

如何使用React在不保持滚动位置的情况下转到另一个页面

reactjs、scroll、routes、next.js、single-page-application

我正在和Next/React合作一个项目。当我点击一个应该带到另一个页面的按钮时，滚动位置保持不变，这意味着我到达新页面时向下X个像素。if (window.pageYOffset > 0) {}

浏览 29提问于2021-10-08得票数 1

1回答

reactjs、react-hooks

我有多个具有相同useEffect代码的组件。钩子代码在多个组件中重复。我只想将这个useEffect钩子移动到自定义钩子中，这样我就不需要在多个组件中重复它。const useMetadataUpdate = ({ data, isSuccess, setSnackbar, dispatch }) => { React.useEffect(() =>我找不到明确说明钩子

浏览 2提问于2021-03-29得票数 1

1回答

history.push更改url，但不呈现表单响应钩子。

javascript、html、reactjs、typescript、forms

英语不是我的母语const [form] = Form.useForm(); const bNameUrl = urlParamss.get("bName"); const PickUpName

浏览 2提问于2021-04-20得票数 1

回答已采纳

1回答

从自定义钩子中响应本机使用对象

react-native、object、hook

我正在尝试从自定义钩子中获取屏幕尺寸，但我不知道如何使用导入组件的结果。下面是导入的组件: getdimensions.js useState,} from "react"; Dimensions{ setHeight(Dimensions.get("scre

浏览 1提问于2020-08-15得票数 1

回答已采纳

2回答

在小屏幕上出现一个对话框-无效的钩子调用

reactjs、material-ui

经过研究，我发现有一个名为的钩子，它在浏览器遇到特定分辨率时返回布尔值。5.1.1"import { useTheme, useMediaQuery, Dialog, DialogTitle } from '@mui/material'; const theme = useTheme(); useEffe

浏览 2提问于2022-02-04得票数 0

回答已采纳

1回答

反应路由器DOM v6替代this.props.match.params，prevProps.match.params，this.props.location.pathname，prevProps.location.pathname

javascript、reactjs、react-router-dom

我以前使用了React路由器DOM v4，如下所示： if ((prevProps.match.params[0] !== this.props.match.params[0])) { } if (this.props.location.pathname !== prevProps.location.pathname){ }我应

浏览 2提问于2022-07-01得票数 0

回答已采纳

2回答

如何使用自定义钩子使代码可重用

javascript、reactjs、react-hooks

我有两个组件，如下所示： let loading; consthasNotification} notification={notification}> )export default Login;

浏览 2提问于2020-04-28得票数 0

回答已采纳

1回答

在将状态传递给函数时响应状态的旧值

reactjs、react-hooks、use-state

在我的简单应用程序中，我有两个带有日期类型(样式-组件)的输入 type="date" value={state.startDate

浏览 1提问于2021-05-15得票数 0

回答已采纳

2回答

使用setInterval调用react组件函数

javascript、reactjs、setinterval

我已经创建了一个名为IsLoggedIn的函数，它使用带有axios.get的useEffect钩子向服务器查询用户的cookie会话时间。

浏览 0提问于2021-01-14得票数 1

2回答

在自定义钩子和组件中使用useEffect有什么不同

javascript、reactjs、react-hooks、use-effect

我想知道在组件中使用useEffect钩子和自定义钩子有什么不同。例如如果我有一个功能组件( component )并在其中直接使用useEffect钩子 import React,{useEffect} from 'react'; } 如果创建自定义</e

浏览 21提问于2020-06-12得票数 3

回答已采纳

1回答

如何避免自定义钩子中的多个API调用

reactjs、react-hooks

我有一个自定义钩子，负责在应用程序初始化时从后端获取一些与用户相关的数据，并将其存储在多个组件所需的全局状态中。数据获取是从钩子内部的useEffect触发的，而且由于多个组件(在同一个视图中呈现)都在调用钩子来访问数据，所以useEffect被多次触发，因此调用API的次数与调用钩子的次数一样多。下面是自定义钩子内部所发生的事情的简化版本： const useM

浏览 5提问于2022-03-23得票数 0

1回答

自定义钩子-将所有责任委托给自定义钩子。反模式？

javascript、reactjs、react-native、react-hooks

我正在清理一个侦听我的db的组件，当它有响应时，导航到一个特定的屏幕。const listenData = (doc) => { start(something); }; }, []); } 我正在考虑将所有的逻辑移动到自定义钩子</

浏览 1提问于2021-11-16得票数 1

回答已采纳

1回答

如何将参数传递给由自定义钩子转换而来的函数？

reactjs、react-redux、react-hooks、arrow-functions、redux-reducers

，我想在一个数组循环和一个事件处理程序中使用这个自定义钩子。因此，我必须将这个自定义钩子转换为一个函数才能使用它，否则会收到警告：无法在回调中调用React Hook "useSetMyObjects“。必须在React函数组件或自定义React Hook函数中调用React Hooks 但是我不知道如何将这个自定义钩子转换为函数。下面是我将如何使用从自定义钩子转换而来

浏览 29提问于2021-11-17得票数 1

回答已采纳

2回答

如何重用组件确实跨多个组件挂载了等效钩子。

javascript、reactjs、react-hooks

我有一个useEffect钩子，当组件挂载时执行几个操作，这个useEffect在许多组件中重复，我想知道我能否将这些操作提升到一个自定义钩子中，然后在每个组件中使用它，这会是什么样子？我的useEffect钩子看起来像： performOperationOne();}, []); 我只是创建一个<em

浏览 5提问于2020-08-20得票数 1

1回答

ReactJS:从另一个子组件调用子方法？

reactjs、d3.js

我使用的是ReactJS 16.12，有三个组件。1)父级2)历史3)SvgViewer。我想从SvgViewer functional component(另一个子组件)调用一个属于History component(子组件)的函数。感谢您的解决方案...这是我的代码：import React, { PureComponent } from "react"; >

浏览 0提问于2019-12-29得票数 0

1回答

早期从react自定义钩子返回是没有得到结构的。

javascript、reactjs、react-hooks

我有一个使用useEffect的自定义钩子。这个钩子应该使用JS fetch从api获取数据。现在，我想根据情况返回api或错误数据，然后对调用这个钩子的组件上的值进行重构。下面是我的自定义钩子的代码const [state, setState] = useState([]); const[errorMsg, setErrorMsg] = u

浏览 4提问于2020-01-22得票数 0

2回答

响应滚动到页面刷新的顶部-不要恢复位置

javascript、reactjs

我目前正在尝试滚动到页面刷新的顶部。到目前为止，我已经能够在路由更改时实现滚动到顶部，但没有实现页面刷新上的--不知何故，react总是恢复以前的位置。我怎样才能防止这种情况发生呢？这就是我如何实现滚动到顶部的(我认为window.scrollTo(0, 0)在componenDidMount()中会有所帮助，但它没有)： class ScrollToTop extends Component

浏览 5提问于2020-03-23得票数 5

回答已采纳

1回答

将钩子存储在React上下文API中作为依赖项注入。这是一个好的模式吗？

reactjs、dependency-injection、react-hooks、react-context

我需要一种灵活的方法来使用钩子，而不是依赖于实现。因此，我使用作为依赖注入模式。

浏览 7提问于2022-07-28得票数 0

1回答

在每次呈现后，从内部向“timeInterval”变量分配的React将丢失

javascript、reactjs

我需要自动重新呈现每6s和我定义的组件如下所示。 clearInterval(timeInterval) }, [])分配给'timeInterval‘变量从内部反应钩子useEff

浏览 4提问于2021-04-10得票数 3

回答已采纳

点击加载更多

在HoC中使用时警告

如何使用React在不保持滚动位置的情况下转到另一个页面