useEffect不监听localStorage
我正在制作一个身份验证系统，后端将我重定向到前端页面后，我正在向userData发出API请求，并将该数据保存到localStorage中.然后，我尝试加载Spinner或UserInfo. 我试图用useEffect监听localStorage的值，但是登录后我得到的是“未定义".更新localStorage值后，useEffect不会再次运行，并且Spinner会永远旋转. 我尝试
..
react-hooks相关内容
我们为什么要在没有依赖项数组的情况下使用useEffect?
我有此代码: const应用:React.FC =()=>{const [isOpen，setIsOpen] = React.useState(true);const [maxHeight，setMaxHeight] = React.useState();const wrapper = React.useRef(null);const content = Re
..
如何在React中使用钩子绑定函数?
基本上，我们在构造函数中绑定事件处理程序函数，或者在如下所示的React类组件中使它们成为箭头函数 class测试扩展了组件{构造函数(道具){超级(道具);this.state = {count:0};this.setCount = this.setCount.bind(this);}setCount(){this.setState({count:this.state.count + 1})
..
仅在效果的一个部门改变时，改变useEffect Hook
我有一个使用Hooks的功能组件: 功能组件(道具){const [items，setItems] = useState([]);//在回调Hook中，以防止不必要的重新渲染const handleFetchItems = useCallback(()=> {fetchItemsFromApi().then(setItems);}，[]);//读取挂载的项目useEffect(()=> {han
..
React挂钩:从回调中访问最新状态
编辑(2020年6月22日):由于这个问题引起了人们的新兴趣，我意识到可能会有一些混乱的地方.因此，我想强调一下:问题中的示例旨在作为一个玩具示例.它不能反映问题.引发此问题的问题在于使用第三方库(在该库中控制有限)，该库将回调作为函数的参数.向回调提供最新状态的正确方法是什么?在react类中，这可以通过使用 this 来完成.在React挂钩中，由于状态被封装在 React.useState(
..
相当于使用React钩子的componentDidUpdate
tldr; 如何模拟 componentDidUpdate 或将 key 属性与数组一起使用以强制重置组件?> 我正在实现一个显示计时器的组件，并在该组件达到零时执行回调.目的是让回调更新对象列表.后一个组件由新的反应挂钩 useState 和 useEffect . 状态包含对计时器启动时间和剩余时间的引用. effect 设置一个每秒调用一次的间隔，以更新剩余时间，并检查是否应调用该回
..
在React with Hooks中实现倒数计时器
我正在尝试使用react钩子在屏幕上呈现一个倒数计时器，但是我不确定呈现它的最佳方法. 我知道我应该使用useEffect将当前状态与以前的状态进行比较，但是我认为我做的不正确. 我将感谢您的帮助！ 我尝试了几种不同的方法，它们都不起作用，例如每当更新时设置状态，但是最终却像疯了似的闪烁. const Timer =({seconds})=>{const [timeLeft，s
..
与基于类的方法相比，使用Hooks设置状态后重新渲染时有什么区别?
类组件 在React类组件中，我们被告知 setState 总是会导致重新渲染，而不管状态是否实际更改为新值.实际上，当状态更新为之前的相同值时，组件将重新渲染. 文档(setState API参考): setState()将始终导致重新渲染，除非shouldComponentUpdate()返回false. 挂钩(功能组件) 但是，使用挂钩，文档会指定将状态更新为与
..
在React Hooks中的未安装组件上清理内存泄漏
我是使用React的新手，所以这可能很容易实现，但是即使我做了一些研究，我也无法自己弄清楚.如果这太傻了，请原谅我. 上下文 我正在将 Inertia.js 与Laravel(后端)和React(前端)适配器一起使用.如果您不知道惯性，基本上就是这样: Inertia.js可让您快速构建现代的单页React，Vue和使用经典的服务器端路由和控制器来精简应用程序. 问题
..
useMemo与useEffect + useState
使用 useMemo (例如用于密集函数调用)而不是结合使用 useEffect 和 useState 是否有任何好处? 这里有两个自定义钩子，它们乍一看完全一样，除了 useMemo 的返回值在第一次渲染时为 null :
..
React钩子的奇怪行为:延迟的数据更新
奇怪的行为:我希望第一和第二个console.log显示不同的结果，但是它们显示相同的结果，并且仅在下次单击时更改该值.我应该如何编辑代码，以使值有所不同? function App(){const [count，setCount] = React.useState(false);const test =()=>{console.log(count);//错误的setCount(！coun
..
使用React钩子+ WebSockets的正确方法
我需要连接到WebSockets服务器并记录其消息.使用React类组件，我会将这种逻辑放在 componentDidMount 生命周期挂钩中并愉快地继续前进，但是我不确定如何使用挂钩正确实现它. 这是我的第一次尝试. import React，{useEffect} from'react';导出默认函数AppWs(){useEffect(()=> {让ws = new WebSock
..
在React Hooks中有设置状态的通用方法吗?如何管理多个状态?
我有一个问题，是否可以在React Hooks中使用 useState 泛型，就像我可以在React Components中同时管理多个状态一样? state = {输入1:“"，input2:“"，input3:“"//..更多状态};handleChange =(event)=>{const {name，value} = event.target;this.setState({[名称]:值
..
如何使用useContext更改Context的值?
在React 16.8+中使用 useContext 钩子可以很好地工作.您可以创建一个组件，使用该钩子并利用上下文值，而不会出现任何问题. 我不确定的是如何将更改应用于Context Provider值. 1)useContext钩子严格来说是一种使用上下文值的方法吗? 2)是否有推荐的方法，使用React钩子来更新子组件中的值，然后使用 useContext 钩子在此上下文中
..
setTimeout的this.state与useState
当我使用类组件时，我有代码: setTimeout(()=> console.log(this.state.count)，5000); 当我使用钩子时: const [count，setCount] = useState(0);setTimeout(()=> console.log(count)，5000); 如果我触发 setTimeout ，然后在超时( 5000ms )之前将
..
如何添加“参考"动态与反应挂钩?
因此，我有一个数据数组，并且正在使用该数据生成组件列表.我想在每个生成的元素上都有一个引用来计算高度.我知道如何使用Class组件执行此操作，但是我想使用React Hooks进行操作. 以下是一个说明我要做什么的示例: 从"react"导入React，{useState，useCallback}const data = [{文字:"test1"}，{文字:"test2"}]const C
..
反应useEffect比较对象
我正在使用react useEffect 钩子，并检查对象是否已更改，然后才再次运行该钩子. 我的代码如下. const useExample =(apiOptions)=>{const [data，updateData] = useState([]);useEffect(()=> {const [data，updateData] = useState([[]);doSome
..
使用条件渲染时，不会调用图像标签上的React onLoad事件
我正在使用无状态功能组件在从外部资源加载图像时添加微调器，如下所示: function ExternalImage(props){const [loaded，setLoaded] = useState(false);函数onLoad(){console.log('loaded');setLoaded(true);}返回加载?
..
如何在React钩子内创建一个新的JSON对象?
我有两个问题，首先我该如何在一个钩子中添加/更新JSON项?另一个原因是React不允许我使用以前的JSON文件中存储的名称. 基本上，我对其他解决方案持开放态度，因为我的输入字段是根据JSON文件动态生成的，因此我不确定存储或访问输入到其中的数据的最佳方法，我认为将它们存储在react挂钩中是JSON，然后将它们作为道具传递给另一个组件可能是最好的. 我想发生的是onChange，我
..
响应HTML选择元素onChange函数，尝试访问"event.target.value"
在React中使用受控的HTML 标记时. 关于以下代码段: 为什么有效: 选项1 function changeSelect(event){const newValue = event.target.value;setNestedState((prevState)=> {返回({... prevState，投标:newValue});});} 这不是
..