Questions tagged «react-hooks»

React Hooks给了我们useState选项，我总是看到Hooks与Class-State的比较。但是Hooks和一些常规变量呢？ 例如， function Foo() { let a = 0; a = 1; return <div>{a}</div>; } 我没有使用Hooks，它将为我带来以下结果： function Foo() { const [a, setA] = useState(0); if (a != 1) setA(1); // to avoid infinite-loop return <div>{a}</div>; } 那么区别是什么？在这种情况下，使用Hooks更加复杂...那为什么要开始使用它呢？

12 javascript  node.js  reactjs  react-hooks 

我正在做一个自定义的钩子，当状态发生变化时，它会带有一个togleg。 您应该能够传递数组中的任何状态。 import { useState, useEffect } from 'react' const useFlatListUpdate = (dependencies = []) => { const [toggle, setToggle] = useState(false) useEffect(() => { setToggle(t => !t) }, [...dependencies]) return toggle } export default useFlatListUpdate 它应该用作 const toggleFlatList = useFlatListUpdate([search, selectedField /*, anything */]) 但这给了我以下警告 React Hook useEffect在其依赖项数组中具有一个split元素。这意味着我们不能静态地验证您是否已经传递了正确的依赖项。eslint（react-hooks / …

10 reactjs  react-native  eslint  react-hooks 

在开发环境中时，我的应用程序可以正常工作。在生产环境中时，它崩溃并显示以下错误： Uncaught TypeError: (0 , _react.useEffect) is not a function 这发生在我导入React和useEffect的文件中，如下所示： import React, { useEffect } from 'react' const X = () => { useEffect(() => { ... }) ... } 在此行下添加console.log确认在生产中useEffect确实是未定义的，在dev中则是预期的功能。 我检查了package.json，yarn.lock和node_modules中是否存在引入了useEffect的16.8.0以下的任何react或react-dom版本。但是所有内容都是16.13.1，它们是主要依赖项，我确实尝试清理了纱线缓存，删除了node_modules＆yarn.lock，然后重新安装。 我尝试将其添加和删除peerDependencies失败。 我检查一下以确保没有运行两个独立版本的React，但要保存window.React1 = React在库和window.React2 = React我的应用程序中并检查 window.React1 === window.React2 是真的，所以也不是。 最后，我还尝试将React别名为node_modules中的特定别名，但是没有任何运气。 我发现可行的唯一解决方案是按如下方式导入它： import React from 'react'; const …

9 javascript  reactjs  react-hooks  parceljs 

我希望用户能够对待办事项列表进行排序。当用户从下拉列表中选择一项时，它将设置，sortKey这将创建的新版本setSortedTodos，并依次触发useEffectand调用setSortedTodos。 下面的示例完全按照我想要的方式工作，但是eslint提示我将其添加todos到useEffect依赖项数组，如果执行此操作，则会导致无限循环（正如您期望的那样）。 const [todos, setTodos] = useState([]); const [sortKey, setSortKey] = useState('title'); const setSortedTodos = useCallback((data) => { const cloned = data.slice(0); const sorted = cloned.sort((a, b) => { const v1 = a[sortKey].toLowerCase(); const v2 = b[sortKey].toLowerCase(); if (v1 < v2) { return -1; } if (v1 > v2) { …

9 javascript  reactjs  react-hooks  eslint