react-hooks 相关问题

使用 React Hooks 在模态外部单击时关闭模态

我正在尝试创建一个弹出订阅框，只要单击关闭按钮或单击弹出窗口之外的任何位置，该框就会关闭。我创建了一个模态组件和一个状态 showModal...

React useReducer 在严格模式下复制结果

严格模式触发我的减速器功能两次，这是预期的。 我没想到的是返回的状态中有重复的元素。 我意识到我没有使用 useReducer corr...

为什么我的 React useState 钩子常量的状态丢失了？

我正在尝试在 React 中构建一个信息面板，显示来自在线社区的三项最新活动。主要是最新注册社区的人。 我目前有一个清单...

useEffect 模拟 componentWillUnmount 不返回更新后的状态

我有一个功能组件，它使用 useState 初始化状态，然后通过输入字段更改此状态。 然后我有一个 useEffect 钩子模拟 componentWillUnmount ，以便在

React 中上下文状态设置不正确

标题可能不明确，但我遇到一个问题，在渲染分配给 /logout 的组件后将我重定向到 /home ，该组件的工作是清除存储并重置 AuthContext 状态。我...

useState 在自定义反应钩子内不起作用[重复]

我正在尝试将业务逻辑的某些部分与视图逻辑分开，为此我正在使用自定义反应挂钩，其工作原理类似于控制器。 我的组件结构 父级包含...

在 useMemo 解决方法中调用钩子

目前我正在通过反应组件中的列表进行映射： const items = useMemo(()=> { 返回 items.map(item=> { const 元素 = useSearchResult(item) }) ... }, [

如何用新数组更新React状态下的数组？

const [元素，setElements] = useState(unfilteredArray); 使用效果（（）=> { 常量过滤数组 = []; elements.map(elem => { if (filterTypes.includes(elem.ty...

React hooks：是否建议将组件作为函数调用？

考虑我们有这个示例组件： 函数计数器() { const [count, setCount] = React.useState(0); 返回 （ {计数} 考虑我们有这个示例组件： function Counter() { const [count, setCount] = React.useState(0); return ( <div> <div> {count} </div> <button onClick={() => { setCount(count + 1); }} > Increase </button> </div> ); } 我有时会遇到一些代码，其中有人在渲染中将反应组件调用为函数： const App = () => ( <div> {Counter()} </div> ) vs 将其渲染为元素： const App = () => ( <div> <Counter/> </div> ) 在react hooks中，是否允许将组件作为函数调用？如果我们这样做会出现什么问题？ 似乎有一个问题可以认为与此类似；尽管那不是专门关于钩子的。而且这个问题似乎强调了性能影响。 React docs 不鼓励将组件作为函数调用： 组件只能在 JSX 中使用。不要像平常那样称呼他们 功能。 React 应该调用它。 他们提到的原因之一是： 如果组件包含Hooks，很容易违反Hooks规则 当直接在循环中或有条件地调用组件时。 虽然他们没有详细说明上面的引用，但我认为下面的示例显示了他们可能的含义。 当您将组件作为函数调用并且其中包含钩子的使用时，在这种情况下，React 会认为该函数中的钩子属于父组件。因此，如果您有条件地调用此类组件（就像我们对下面的TestB()所做的那样），您将违反钩子的rules之一。点击重新渲染按钮可以看到错误： 错误：渲染的钩子数量少于预期。这可能是由于 意外提前退货声明。 function TestB() { let [B, setB] = React.useState(0); return ( <div onClick={() => { setB(B + 1); }} > counter B {B} </div> ); } function App() { let [A, setA] = React.useState(0); return ( <div> <button onClick={() => { setA(A + 1); }} > re-render </button> {/* Conditionally render TestB() */} {A % 2 == 0 ? TestB() : null} </div> ); } ReactDOM.render( <App />, document.getElementById("react") ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div> 现在您可以使用上面的<TestB/>来代替并查看差异。 文档还提到将组件呈现为元素（而不是将其作为函数调用）允许组件类型参与协调。 这意味着，当您将反应组件渲染为反应元素时，例如 <TestB/> ，然后在下一次渲染时，由于协调算法（并且因为组件类型已更改），React 将卸载 <TestC/> 组件（其所有状态都将消失）并安装一个新组件 <TestB/>。但是，如果您将其称为函数（例如<TestC/>），则组件类型将不再参与协调，您可能无法获得预期的结果。见下面的例子： TestB() function TestB() { return ( <div > <input/> </div> ); } function TestC() { console.log("TestC") return ( <div > <input/> </div> ); } function App() { let [A, setA] = React.useState(0); return ( <div> <button onClick={() => { setA(A + 1); }} > re-render </button> {/* Here we are alternating rendering of components */} {A % 2 == 0 ? TestB() : TestC()} </div> ); } ReactDOM.render( <App />, document.getElementById("react") ); 在输入框中输入内容 现在单击重新渲染按钮 您现在可以从日志中看到组件 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div> 已渲染，但输入显示的值与您之前键入的值相同 - 这可能不是您想要的，因为您渲染了不同的组件。发生这种情况是因为 Reacts 协调算法无法检测到我们移动到了不同的组件（从 TestC 到 TestB）并且没有从 DOM 中删除先前的输入实例。 现在将这些组件渲染为元素（TestC和<TestB/>）以查看差异。将组件渲染为元素的好处 文档还提到了将组件渲染为元素的以下好处： 组件不再只是功能。 React 可以通过以下方式增强它们 通过 Hooks 绑定到本地状态等功能 组件在树中的身份。 组件类型参与协调。通过让 React 调用 你的组件，你还告诉它更多关于概念结构的信息 你的树。例如，当您从渲染移动到 页面，React 不会尝试重用它们。 React 可以增强您的用户体验。例如，它可以让 浏览器在组件调用之间做一些工作，以便重新渲染 大组件树不会阻塞主线程。 更好的调试故事。如果组件是一等公民 该库知道，我们可以构建丰富的开发工具 在发展中反省。 更高效的对账。 React 可以准确决定哪个 树中的组件需要重新渲染并跳过那些 不。这使您的应用程序更快、更敏捷。

React hooks：我们可以将组件作为函数来调用吗？

考虑我们有这个示例组件： 函数计数器() { const [count, setCount] = React.useState(0); 返回 （ {计数} 考虑我们有这个示例组件： function Counter() { const [count, setCount] = React.useState(0); return ( <div> <div> {count} </div> <button onClick={() => { setCount(count + 1); }} > Increase </button> </div> ); } 我有时会遇到一些代码，其中有人在渲染中将反应组件调用为函数： const App = () => ( <div> {Counter()} </div> ) vs 将其渲染为元素： const App = () => ( <div> <Counter/> </div> ) 在react hooks中，是否允许将组件作为函数调用？如果我们这样做会出现什么问题？ 似乎有一个问题可以认为与此类似；尽管那不是专门关于钩子的。而且这个问题似乎强调了性能影响。 React docs 不鼓励将组件作为函数调用： 组件只能在 JSX 中使用。不要像平常那样称呼他们 功能。 React 应该调用它。 他们提到的原因之一是： 如果组件包含Hooks，很容易违反Hooks规则 当直接在循环中或有条件地调用组件时。 虽然他们没有详细说明上面的引用，但我认为下面的示例显示了他们可能的含义。 当您将组件作为函数调用并且其中包含钩子的使用时，在这种情况下，React 会认为该函数中的钩子属于父组件。因此，如果您有条件地调用此类组件（就像我们对下面的TestB()所做的那样），您将违反钩子的rules之一。点击重新渲染按钮可以看到错误： 错误：渲染的钩子数量少于预期。这可能是由于 意外提前退货声明。 function TestB() { let [B, setB] = React.useState(0); return ( <div onClick={() => { setB(B + 1); }} > counter B {B} </div> ); } function App() { let [A, setA] = React.useState(0); return ( <div> <button onClick={() => { setA(A + 1); }} > re-render </button> {/* Conditionally render TestB() */} {A % 2 == 0 ? TestB() : null} </div> ); } ReactDOM.render( <App />, document.getElementById("react") ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div> 现在您可以使用上面的<TestB/>来代替并查看差异。 文档还提到将组件呈现为元素（而不是将其作为函数调用）允许组件类型参与协调。 这意味着，当您将反应组件渲染为反应元素时，例如 <TestB/> ，然后在下一次渲染时，由于协调算法（并且因为组件类型已更改），React 将卸载 <TestC/> 组件（其所有状态都将消失）并安装一个新组件 <TestB/>。但是，如果您将其称为函数（例如<TestC/>），则组件类型将不再参与协调，您可能无法获得预期的结果。见下面的例子： TestB() function TestB() { return ( <div > <input/> </div> ); } function TestC() { console.log("TestC") return ( <div > <input/> </div> ); } function App() { let [A, setA] = React.useState(0); return ( <div> <button onClick={() => { setA(A + 1); }} > re-render </button> {/* Here we are alternating rendering of components */} {A % 2 == 0 ? TestB() : TestC()} </div> ); } ReactDOM.render( <App />, document.getElementById("react") ); 在输入框中输入内容 现在单击重新渲染按钮 您现在可以从日志中看到组件 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div> 已渲染，但输入显示的值与您之前键入的值相同 - 这可能不是您想要的，因为您渲染了不同的组件。发生这种情况是因为 Reacts 协调算法无法检测到我们移动到了不同的组件（从 TestC 到 TestB）并且没有从 DOM 中删除先前的输入实例。 现在将这些组件渲染为元素（TestC和<TestB/>）以查看差异。将组件渲染为元素的好处 文档还提到了将组件渲染为元素的以下好处： 组件不再只是功能。 React 可以通过以下方式增强它们 通过 Hooks 绑定到本地状态等功能 组件在树中的身份。 组件类型参与协调。通过让 React 调用 你的组件，你还告诉它更多关于概念结构的信息 你的树。例如，当您从渲染移动到 页面，React 不会尝试重用它们。 React 可以增强您的用户体验。例如，它可以让 浏览器在组件调用之间做一些工作，以便重新渲染 大组件树不会阻塞主线程。 更好的调试故事。如果组件是一等公民 该库知道，我们可以构建丰富的开发工具 在发展中反省。 更高效的对账。 React 可以准确决定哪个 树中的组件需要重新渲染并跳过那些 不。这使您的应用程序更快、更敏捷。

创建可重用的获取函数时出现无效的钩子调用

我正在尝试发出可重用的 GET 和 POST 请求，但在可重用的获取请求组件中设置数据状态时收到错误 Invalid hook call 。我刚刚了解到我们只能使用...

使用 React-Hook-Form 填充表单时遇到问题

所以我一直在尝试使用react-hook-form创建一个多步骤表单，我成功地做到了这一点，作为创造价值的一种方式。 但是当涉及到更新它们时。有点难。它确实适用于...

如果图像 url 在 React Native 中给出 404 错误，我如何使用默认图像？

如果图像 URL 出现 404 错误，我想加载默认图像。我在 image prop 中尝试了 onError() 但它不起作用。 { 设置错误（真）； ...

可能未处理的 Promise 拒绝（id：1）

我试图在 React Native 中使用来自 expo 的 Google API 身份验证，当我尝试登录到 api 时，出现下一个错误： 代码 ： 从 'react' 导入 React, { createContext,useContext } 小鬼...

如何防止antd rangepicker组件中的时间选择自动交换？

这是antd的Rangepicker（取自https://ant.design/components/date-picker），放在antd的Form Item组件中。 这是antd的Rangepicker（取自https://ant.design/components/date-picker），放在antd的Form Item组件中。 <Form.Item name={name} label="Start/End Datetime" style={{ marginBottom: 15 }} rules={[ { required: required, message: "This is a mandatory field", }, { validator: (_, value) => customValidator(value) }, ]} > <RangePicker style={{ width: '100%' }} format={'YYYY-MM-DD HH:mm'} showTime={{ format: 'HH:mm' }} onCalendarChange={(dates) => { setStartDate(dates?.[0]); setEndDate(dates?.[1]); }} disabledDate={disabledDate} disabledTime={disabledRangeTime} /> </Form.Item> const disabledRangeTime = (_, type) => { if (type === 'start') { return { disabledHours: () => endDate ? range(0, 24).splice(moment(startDate).add(1, 'hour').hours(), 24) : null, disabledMinutes: () => { if (endDate && moment().isSame(endDate, 'day')) return range(0, 60).splice( moment(startDate).add(1, 'minute').minutes(), 60, ); else return null; }, }; } return { disabledHours: () => startDate ? range(0, 24).splice(0, moment(startDate).hour()) : null, disabledMinutes: () => { if (startDate && moment().isSame(startDate, 'day')) return range(0, 60).splice(0, moment(startDate).minutes()); else return null; }, };}; const disabledDate = (current) => { return current && current < moment().startOf('day'); }; const range = (start, end) => { const result = []; for (let i = start; i < end; i++) { result.push(i); } return result;}; 假设我输入 3/16 10:00 作为开始日期，3/16 3:00 作为结束日期，单击“确定”会自动交换时间，这可能会被忽视，并且用户体验很差。 我发现 Timepicker 文档中提到了一个名为“order”的 prop（https://ant.design/components/time-picker），但将 prop 设置为 false 似乎没有任何作用。 有没有办法停止自动交换并抛出验证错误？ 您可以使用 order 的 RangePicker 属性。它接受 Boolean。将其设置为 false 将阻止 RangePicker 交换所选时间。

我可以用当前数据调用componentWillUnmount（功能组件）吗？

我有一个功能组件 导出 const 示例 = () => { const [数据，setData] = useState(0); 使用效果（（）=> { 返回（）=> { console.log(&q...

React useState 布尔值不更新

我正在尝试创建一个自定义 toast 以显示错误通知。 Toast 的可见性取决于道具中的 isShowed。 导出类型 ToastProps = { 颜色：'错误'| '成功' | '警告'; 我...

react 中 useObservable 钩子的可选通用选择函数

我有用于 rxjs 可观察量的自定义通用钩子。现在看起来像这样： 输入参数 = { 可观察$：可观察 |无效的; 下一个：（值：T）=> void； }; 导出常量

如何在 React Native 中渲染快速变化的数据？

我正在构建一个应用程序，显示来自 ROV 的数据。我想在应用程序上显示车辆状态。我正在从网络套接字接收数据，我正在尝试使用 useState 设置该数据。但是...

我有一个购物应用程序组件，我只想在特定页面上显示。尝试了 useLocation 但该组件具有动态 id

我想知道如何使下面代码中的“page”变量动态化，这样我就可以正确地将它与具有动态页面ID的“useLocation().pathname”变量进行比较。 重要...