React hooks:在监听器中获取 useState 的状态
我的组件中有这个: const [ pendingMessages, setPendingMessages ] = React.useState([]);React.useEffect(function() {ref.current.addEventListener('send-message', onSendMessage);返回函数(){ref.current.removeEventList
..
react-hooks相关内容
使用 React Hooks 多次获取数据 axios
我想从 Github 用户和他的存储库中获取全局信息(获得固定存储库会很棒).我尝试使用 async await 来实现，但这是正确的吗?我有 4 次 reRender(4 次控制台日志).获取所有数据后是否可以等待所有组件重新渲染? function App() {const [data, setData] = useState(null);const [repos, setRepos] =
..
尝试使用 react-apollo-hooks 在函数中调用 useQuery
我想在需要时调用 useQuery， 但是useQuery不能在函数内部. 我的尝试代码是: export const TestComponent = () =>{...const { 数据，加载，错误 } = useQuery(gql(GET_USER_LIST), {变量:{数据: {页面:更改页面，页面大小:10，},},})......const onSaveInformat
..
你能早点带着 React 钩子回来吗?
React 文档明确指出 有条件地调用钩子是行不通的.从最初的 React hooks 介绍，原因是因为 React 使用你调用 hooks 的顺序来注入正确的值. 我明白这一点，但现在我的问题是从带有钩子的函数组件中提前返回是否可以. 所以允许这样的事情吗?: 从'react'导入React；import { useRouteMatch, Redirect } from 'reac
..
在 React useEffect 钩子中引用过时的状态
我想在卸载组件时将状态保存到 localStorage.这曾经在 componentWillUnmount 中工作. 我尝试对 useEffect 钩子做同样的事情，但在 useEffect 的返回函数中似乎状态不正确. 这是为什么?如何在不使用类的情况下保存状态? 这是一个虚拟示例.当您按下关闭时，结果始终为 0. import React, { useState, useE
..
使用 useState() 钩子测试功能组件时设置状态
当我用酶测试类组件时，我可以执行 wrapper.setState({}) 来设置状态.当我使用 useState() 钩子测试功能组件时，我现在如何做同样的事情? 例如在我的组件中，我有: const [mode, setMode] = useState("my value"); 我想在我的测试中更改 mode 解决方案 当使用来自钩子的状态时，您的测试必须忽略状态等实现细节，
..
使用钩子检测 React 组件外的点击
我发现我在应用程序中重用了当用户在元素外单击时我可以隐藏它的行为. 随着钩子的引入，我是否可以将其放入钩子中并在组件之间共享以节省我在每个组件中编写相同的逻辑? 我已经在一个组件中实现了一次，如下所示. const Dropdown = () =>{const [isDropdownVisible, setIsDropdownVisible] = useState(false);co
..
React 钩子中的 useEffect 第二个参数变化?
在 react hooks 中，这 3 个片段有什么区别. //1.功能应用(){const [isOn, setIsOn] = useState(false);useEffect(() => {const interval = setInterval(() => console.log('tick'), 1000);返回 () =>清除间隔(间隔)；});}//2.功能应用(){const [
..
React hooks:为什么异步函数中的多个 useState setter 会导致多次重新渲染?
以下 onClick 回调函数将导致 1 次重新渲染: const handleClickSync = () =>{//setter 的顺序无关紧要 - React 将所有状态更改集中在一起//结果是一次重新渲染设置值(“两个")；设置条件(真)；setNumber(2);}; React 将所有三个状态更改集中在一起并导致 1 次重新渲染. 但是，以下 onClick 回调函数将导致
..
如何模拟反应自定义钩子返回值?
这是我的自定义钩子: 导出函数 useClientRect() {const [scrollH, setScrollH] = useState(0);const [clientH, setClientH] = useState(0);const ref = useCallback(节点 => {如果(节点！== 空){setScrollH(node.scrollHeight);setClien
..
使用“useState"挂钩时，有什么方法可以使用 React DevTools 查看 React 多状态中的“字段"名称
我一直在学习/试验 React 钩子.当我在 Chrome 中使用 React DevTools 检查组件当前状态的值时，我看到状态很好，但实际的“字段"——即由各个 更新的状态变量useState 钩子——没有与它们关联的任何名称.相反，我看到，例如，几个字符串，几个布尔值等.我通常可以弄清楚发生了什么，但这似乎有问题——我希望能够看到哪个状态变量的名称是什么. 例如，如果我有类似的东西
..
使用 React hook 实现自增计数器
代码在这里:https://codesandbox.io/s/nw4jym4n0 export default ({ name }: Props) =>{const [计数器，setCounter] = useState(0);useEffect(() => {const 间隔 = setInterval(() => {设置计数器(计数器 + 1)；}, 1000);返回 () =>{清除间隔(
..
确定哪个依赖数组变量导致 useEffect 钩子触发
是否有一种简单的方法可以确定 useEffect 依赖项数组中的哪个变量触发函数重新触发? 简单地注销每个变量可能会产生误导，如果 a 是一个函数而 b 是一个对象，它们在记录时可能看起来相同但实际上不同并导致 useEffect火灾. 例如: React.useEffect(() => {//哪个变量触发了这个重新触发?console.log('---useEffect---')}
..
在 react useState 中使用时未定义 Firebase 数据
我的问题很简单.我有一个 firebase 实时数据库，我正在从数据库中获取数据并尝试插入到 useState 中，以便我可以在我的应用程序中显示这些数据.但无论我做什么，数据总是未定义或为空.奇怪的是，如果我在 jsx 组件中插入完全相同的数据或控制台记录它，它显示没有任何问题. 这是我正在做的事情以及问题的描述: 首先是我的用户实时数据库 我只想访问 fullname 属性并
..
如何在 state 和 props 更改时渲染组件?
我需要显示 props 值(这是一个简单的字符串).每次我得到新的搜索结果时，我都会发送 props. 在第一次渲染时，props 将始终是 undefined. 编辑: Header.jsx function Header() {const [searchString, setString] = useState('');const onChangHandler = (e) =>{s
..
如何修复“useEffect 缺少依赖项"?在自定义钩子中
我正在使用自定义钩子从 API 中提取一些数据，以便在一组 React 函数组件中使用.然而，esLint 抛出了一个可爱的警告: React Hook useEffect 缺少依赖项:'fetchFromAPI'.任何一个包括它或删除依赖数组. 我不认为这是一个依赖项，因为它在 useFetch() 内部.我需要这样做，因为我正在使用 await.我究竟做错了什么?可以关闭这条线的警
..
何时使用无依赖关系的 useEffect 与直接赋值?
我正在编写一个 React 钩子，它允许我在我的组件中使用 setInterval.为此，我需要在 ref 中保留最新版本的回调，以便稍后可以从区间范围访问它. 这是我目前的代码: import { useRef, useEffect } from 'react'导出默认函数 useInterval(回调:() =>空白，延迟:数量 |空值，){const callbackRef = us
..
我应该在哪里声明在 useEffect() 钩子中调用的函数?
因此，当使用 useEffect 调用依赖于状态的函数时，我遇到了以下情况. 示例: //内部应用程序组件const [someState, setSomeState] = React.useState(0);const [someTrigger, setSomeTrigger] = React.useState(false);函数 someFunction() {返回 someState
..
React + Firebase 使用钩子?
我找到了一个关于将 React 与 Firebase 一起使用的很棒的教程，它非常简单地将文本字段的数据存储在数据库中，但我对如何将其转换为使用 Hooks 感到困惑.我找不到很多关于使用 Hooks + Firebase 的教程，所以我很感激任何帮助！ import React, {useState} from 'react'从'./fire'导入火导入'./App.css'const App
..
在 React 函数组件中模拟 refs
我有一个 React 函数组件，它在它的一个子组件上有一个引用.ref 是通过 useRef 创建的. 我想用浅渲染器测试组件.我必须以某种方式模拟 ref 以测试其余功能. 我似乎找不到任何方法来获得这个参考并嘲笑它.我尝试过的东西 通过 childs 属性访问它.React 不喜欢那样，因为 ref 并不是真正的道具 模拟 useRef.我尝试了多种方法，但只有在我的实
..