Questions tagged «react-hooks»

Hooks是一项新功能，使开发人员无需编写类即可使用状态和其他React功能。

6
如何仅使用一次React useEffect调用加载函数
该useEffect阵营钩将运行在功能上传递的每一个变化。可以对其进行优化，使其仅在所需属性更改时才调用。 如果我想从中调用初始化函数componentDidMount而不在更改时再次调用该怎么办？假设我要加载一个实体，但是加载功能不需要组件中的任何数据。我们如何使用useEffect钩子做到这一点？ class MyComponent extends React.PureComponent { componentDidMount() { loadDataOnlyOnce(); } render() { ... } } 使用钩子可能看起来像这样： function MyComponent() { useEffect(() => { loadDataOnlyOnce(); // this will fire on every change :( }, [...???]); return (...); }
12
使用useEffect React Hook时如何解决缺少依赖项警告？
使用React 16.8.6（在以前的版本16.8.3中很好），当我尝试防止在获取请求上发生无限循环时，出现此错误 ./src/components/BusinessesList.js Line 51: React Hook useEffect has a missing dependency: 'fetchBusinesses'. Either include it or remove the dependency array react-hooks/exhaustive-deps 我一直找不到停止无限循环的解决方案。我想远离使用useReducer()。我确实在https://github.com/facebook/react/issues/14920找到了这个讨论，在这里可能的解决方案是You can always // eslint-disable-next-line react-hooks/exhaustive-deps if you think you know what you're doing.我不确定自己在做什么，所以我还没有尝试实现它。 我有这个当前设置，React钩子useEffect永远/无限循环连续运行，唯一的注释是useCallback()我不熟悉的。 我目前的使用方式useEffect()（类似于，我一开始只想运行一次componentDidMount()） useEffect(() => { fetchBusinesses(); }, []); const fetchBusinesses = () => { …
4
useState设置方法不能立即反映更改
我正在尝试学习钩子，该useState方法使我感到困惑。我正在将初始值分配给数组形式的状态。useState即使使用spread(...)或，in中的set方法对我也不起作用without spread operator。我已经在另一台PC上创建了一个API，我正在调用该API并提取要设置为状态的数据。 这是我的代码： import React, { useState, useEffect } from "react"; import ReactDOM from "react-dom"; const StateSelector = () => { const initialValue = [ { category: "", photo: "", description: "", id: 0, name: "", rating: 0 } ]; const [movies, setMovies] = useState(initialValue); useEffect(() => { (async …
9
如何在React Hooks useEffect上比较oldValues和newValues？
假设我有3个输入：rate，sendAmount和receiveAmount。我把那3个输入放在useEffect diffing params上。规则是： 如果sendAmount更改，我计算 receiveAmount = sendAmount * rate 如果receiveAmount改变了，我计算 sendAmount = receiveAmount / rate 如果费率发生变化，我计算receiveAmount = sendAmount * rate时间sendAmount > 0或计算sendAmount = receiveAmount / rate时间receiveAmount > 0 这是codesandbox https://codesandbox.io/s/pkl6vn7x6j来演示此问题。 有没有一种方法可以比较oldValues和newValues喜欢，componentDidUpdate而不是为此情况制作3个处理程序？ 谢谢 这是我使用https://codesandbox.io/s/30n01w2r06的最终解决方案usePrevious 在这种情况下，我不能使用多个，useEffect因为每次更改都会导致相同的网络呼叫。这就是为什么我也使用changeCount跟踪更改的原因。这changeCount也有助于跟踪仅来自本地的更改，因此我可以防止由于服务器的更改而导致不必要的网络呼叫。
28
在函数“ app”中调用React Hook“ useState”，该函数既不是React函数组件也不是自定义React Hook函数
我正在尝试使用React钩子解决一个简单的问题 const [personState,setPersonState] = useState({ DefinedObject }); 具有以下依赖性。 "dependencies": { "react": "^16.8.6", "react-dom": "^16.8.6", "react-scripts": "3.0.0" } 但我仍然收到以下错误： ./src/App.js 第7行： 在函数“ app”中调用React Hook“ useState”，该函数既不是React函数组件也不是定制的React Hook函数react-hooks / rules-of-hooks 第39行： 未定义 “状态” 搜索关键字以了解有关每个错误的更多信息。 组件代码如下： import React, {useState} from 'react'; import './App.css'; import Person from './Person/Person'; const app = props => { const …
9
React中的useState（）是什么？
我目前正在React中学习钩子概念，并试图理解以下示例。 import { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } 上面的示例在处理程序函数参数本身上增加计数器。如果我想在事件处理函数中修改计数值怎么办 考虑下面的例子 setCount = () => …
5
我可以在useEffect挂钩中设置状态
可以说我有一些状态依赖于其他状态（例如，当A更改时，我希望B更改）。 创建一个观察A并将B设置在useEffect钩内的钩子是否合适？ 效果是否会级联，从而在我单击按钮时会触发下一个效果，从而导致b发生变化，从而导致第二个效果在下一次渲染之前触发？这样构造代码是否有性能下降？ let MyComponent = props => { let [a, setA] = useState(1) let [b, setB] = useState(2) useEffect( () => { if (/*some stuff is true*/) { setB(3) } }, [a], ) useEffect( () => { // do some stuff }, [b], ) return ( <button onClick={() => …
8
从组件中的useState多次调用状态更新程序会导致多次重新渲染
我第一次尝试使用React钩子，直到我意识到当我获取数据并更新两个不同的状态变量（数据和加载标志）时，我的组件（数据表）都呈现两次，即使这两个调用都看起来不错状态更新程序发生在同一功能中。这是我的api函数，它将两个变量都返回给我的组件。 const getData = url => { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); useEffect(async () => { const test = await api.get('/people') if(test.ok){ setLoading(false); setData(test.data.results); } }, []); return { data, loading }; }; 在普通的类组件中，您只需调用一次即可更新状态，该状态可以是一个复杂的对象，但“钩子”似乎是将状态拆分为较小的单元，其副作用似乎是多次分别更新时呈现。有什么想法可以减轻这种情况吗？
5
useRef和createRef有什么区别？
我偶然发现钩子文档useRef。 看他们的例子... function TextInputWithFocusButton() { const inputEl = useRef(null); const onButtonClick = () => { // `current` points to the mounted text input element inputEl.current.focus(); }; return ( <> <input ref={inputEl} type="text" /> <button onClick={onButtonClick}>Focus the input</button> </> ); } …似乎useRef可以替换为createRef。 function TextInputWithFocusButton() { const inputRef = createRef(); // what's …
7
对useEffect中的异步函数的React Hook警告：useEffect函数必须返回清除函数，否则不返回任何内容
我正在尝试useEffect示例，如下所示： useEffect(async () => { try { const response = await fetch(`https://www.reddit.com/r/${subreddit}.json`); const json = await response.json(); setPosts(json.data.children.map(it => it.data)); } catch (e) { console.error(e); } }, []); 运行代码段隐藏结果展开摘要 我在控制台中收到此警告。但是我认为异步调用的清理是可选的。我不确定为什么会收到此警告。链接沙箱示例。https://codesandbox.io/s/24rj871r0p
16
如何在React中强制使用挂钩重新渲染组件？
考虑下面的钩子示例 import { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } 基本上，我们使用this.forceUpdate（）方法强制组件在React类组件中立即重新呈现，如以下示例所示 class Test extends Component{ constructor(props){ super(props); this.state = { count:0, count2: 100 } this.setCount = …
13
使用中的无限循环
我一直在使用React 16.7-alpha中的新钩子系统，并在我处理的状态是对象或数组时陷入useEffect的无限循环中。 首先，我使用useState并使用一个空对象启动它，如下所示： const [obj, setObj] = useState({}); 然后，在useEffect中，我再次使用setObj将其设置为空对象。作为第二个参数，我传递了[obj]，希望如果对象的内容没有更改，它也不会更新。但是它一直在更新。我猜是因为不管内容如何，​​这些总是不同的对象，这使React认为它不断变化？ useEffect(() => { setIngredients({}); }, [ingredients]); 数组也是如此，但是作为原语，它不会像预期的那样卡在循环中。 使用这些新的挂钩，在检查天气内容是否已更改时，应该如何处理对象和数组？
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.