react-hooks相关内容
我有一个在useState中存储一组水果的反应组件。我有一个过滤水果的记忆函数(VisibleFruits)。我将visibleFruits映射到DOM。 问题是,当我检查水果时,所有可见的水果都会重新呈现。 我希望只重新呈现选定的一个,因为它是唯一正在更改的。 有没有办法让我使用此图案,但不在检查时重新呈现所有图案? 现实生活中,在visibleFruits useMem
..
我在和Reaction Hooks作斗争。我在网上看了看,但想不出如何让这些例子适应我的代码。我有以下组件,它会触发";太多重新呈现";错误: const EmailVerification = () => { const [showMessage, setShowMessage] = useState(true); const [text, setText] = u
..
我想在从B页面(比如说,项目的详细信息)返回时恢复滚动位置A页面(项目列表)。我已经找到了解决方案here,但专家/评论员告诉我,最好通过react-routes实现它,因为当前的输出是使用sessionStorage完成的。 目前,我从A页面导航到B页面,路线如下: /channelId/items/itemId。当使用history.push(/)返回时,我会进入项目列表的顶部。 附言:我不
..
在Reaction(使用挂钩时)中有一个概念让我困惑。 我做了一个组件进行解释(增加了一个计数器): const [counter, setCounter] = useState(0); // counter hook // code will follow // render return (
+
..
我这里有一个CircularLoader使用材料用户界面。 我唯一的问题是,如果变量是indeterminate,则按原样显示加载器,而如果是determinate,则按原样显示加载器中的百分比和文本。 Codesandbox:CLICK HERE const CircularLoader = (props) => { const { height = "auto",
..
我已经成功实现了调用API Endpoint的useFetch函数。如果我将这样的代码添加到如下所示的功能性Reaction组件的根中,它就能完美地工作: const [{ data, isLoading, isError }] = useFetch( 'http://some_api_endpoint_path' ); export const useFetch = (
..
我正在尝试使组件在输入每个字母时将焦点移动到下一个输入。 我认为我需要像数组一样的多个ref,但我不知道它是什么。 这是该问题的示例代码。 function PIN({length, onChange, value}){ const inputEl = React.useRef(null); function handleChange(e){ onChange(e
..
我有一个父组件和子组件,我想知道如何使用子组件中的异步函数。我目前也在使用Reaction挂钩。 代码 import React, { useEffect, useState, useRef } from "react"; // reactstrap components import { Card, Container, Row } from "reactstrap"; // c
..
我现在需要由不同组件共享状态arrCheckoutAmount,即CheckoutPageComponent,以便在CheckoutPageComponent中可以使用来自arrCheckoutAmount状态的数据。 我将提供两组代码,一组是我尝试集成使用上下文API的代码,另一组是在介绍使用上下文API之前的代码。 使用上下文接口: ·CheckoutConext.jsx impo
..
我已经成功地生成了随机颜色。问题是,我还想为相同orderNumber的背景色指定相同的随机颜色。我该怎么做? 请检查我的代码和方框 CLICK HERE const newColorFind = () => { for (let x = 0; x
..
我是Redux的新手,我已经将它与我的Reaction应用程序集成在一起,但我有一个关于小测试的说明。 在下一个示例中,我看到在第二次单击时添加了User的值。 减速机: const initialState = { user: '', password: '' } export const admin = (state = initialState, acti
..
我正在尝试访问我的Apollo客户端的setContext函数中的Reaction上下文值。我希望能够使用Reaction上下文值动态更新每个GraphQL请求的头。但我遇到一个错误,日志中没有可见的错误消息。我正在尝试做的事情可能吗? import React, { useState, useContext } from "react"; import { render } from "r
..
我使用的是REACTIVE-Native,在其中,我有一个名为useUser的自定义Hook,它使用Auth.getUserInfro方法从AWS Amplify获取用户信息,然后获取返回对象的一部分并使用它设置状态变量。我还有另一个名为useData的钩子,它根据用户ID获取一些数据并将其设置为状态变量。 使用用户自定义挂钩: import React, { useState, us
..
这是一个反应风格的问题。 tl;dr从Reaction的useState获取set函数。如果函数在每次渲染时都会更改,那么在只运行一次效果情况下,在useEffect中使用该函数的最佳方式是什么? 解释我们有一个useEffect需要运行一次(它获取Firebase数据),然后将该数据设置为应用程序状态。 这里有一个简化的示例。我们正在使用little-state-machine,u
..
编辑:更好的解释 上下文: 我从第三台服务器收到一些普通的HTML代码,我希望 在我的Reaction应用程序中插入 修改 普通JS方法 我可以使用正则表达式修改字符串,并使用id 添加任何HTML标记 然后我可以像往常一样通过getElementById修改这些元素 反应方法 我不应该使用DOM 然后我应该在字符串中插入一些内部有Reaction引
..
我正在尝试学习如何在原生反应中使用自定义钩子。我使用AWS Amplify作为我的后端,它有一个方法来获取经过身份验证的用户的信息,即Auth.currentUserInfo方法。然而,它返回的是一个对象,我想做一个定制的钩子,既返回我需要的对象部分,又从可视化部分抽象出我的这部分代码。我有一个名为App的组件和一个名为useUserId的定制Hook。它们的代码如下: useUserId挂
..
我使用setState来控制面板的打开/关闭状态,这与this post here有点类似。我正在尝试open one panel at one time,以便state中只有一个真值。 以下是我的代码: // Parents component const [show, setShow] = useState({ 1 : false, // id=1 when passed
..
我有一个Reaction Hooks组件,它在启动时从API服务器获取数据。(使用中有效) 我正在尝试使用酶创建单元测试,但酶似乎没有等待数据可用。 { "react": "^16.8.6", "enzyme": "^3.10.0", "enzyme-adapter-react-16": "^1.14.0", } 我正在测试的组件 import React, {useEffe
..
我尝试在setState内部setInterval函数,得到: 无法对已卸载的组件执行反应状态更新。 有帮助吗? useEffect(() => { NewTimer() }, []) const NewTimer = () => { let count = 0 let timer = setInterval(() => { count++ if (
..
下面的代码是我的最小问题再现组件。它初始化Fabric Canvas,并处理&模式和状态。模式状态确定是否可以编辑画布,并由一个简单的按钮控制该状态。 问题是,即使mode,setMode正常工作(意味着-组件分析器在按钮单击后显示正确的状态,按钮内的文本也显示正确的状态),modeFabric事件回调中的钩子返回的状态仍然返回初始状态。 我认为问题是因为函数作为回调传递到Fabric
..