问题标签 [react-functional-component]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
529 浏览

javascript - React:如何在功能组件中创建状态依赖函数?

在我的应用程序中,我有这样的组件:

在函数内部setValuegetValue我总是有默认值inputValue- 我无法在这个函数内部获得更新的状态。我如何组织我的代码来解决这个问题?

附言

1)使用 useCallback 我有相同的结果:

2) 使用 useEffect 功能setValue并且getValue在第一次渲染时不可用:

0 投票
2 回答
794 浏览

javascript - React function 组件状态 - 重新渲染太多。React 限制渲染次数以防止无限循环

我是 React 新手,我正在尝试学习 React 函数组件状态。我想知道为什么我们需要做onClick={() => setCount(count + 1)}而不是onClick={setCount(count + 1)}

0 投票
2 回答
121 浏览

reactjs - 使用没有状态的输入标签反应展示(无状态)组件?

我正在尝试遵循一个简单的演示模型,即它没有状态。

问题是,如果我使用输入标签或其他表单控件,该组件更新自身的唯一方法是使用状态 - 这是正确的吗?

这意味着,任何只有 1 个输入标签的组件都将被迫成为有状态的组件,而不是无状态的 - 只是因为 react 的工作方式以及在用户输入时更新输入标签。

有替代方案吗?

虽然我使用的是更简洁的钩子,并且允许我通过使用“useState”来使用功能组件 - 它仍然是有状态的。

现在出现了钩子——我们是说所有功能组件都可以保持状态吗?好像不太对。

还是仅仅是由于 react 的工作方式,任何具有输入标签的组件都会自动成为有状态的组件?

当然,我可以做的是通过 props 传递默认值并将这些值传递给更高的组件(我真正的有状态组件)——但这似乎还有很长的路要走。

我希望对什么应该是实现具有输入标签的无状态组件的方法有所了解 - 或者我们是否应该始终将值传递回父组件,或者当组件具有输入标签时,它的一个可理解的副作用是我们将存储最小状态(例如使用 useState,在钩子中)

有任何想法吗 ?

0 投票
1 回答
283 浏览

reactjs - 如何在 API 获取有效负载之前格式化 React 表单提交

我正在尝试提交一个将表单字段输入到 React 挂钩状态对象的表单。但是,应用程序中期望有效负载对象为某种格式的其他组件会访问有效负载对象。

因此,formInput 对象有两个属性。但它们需要嵌套,如下所示:

我尝试调用一个函数来使用新的状态对象包装它们,但它给了我一个未定义的模式属性错误:

在上面的例子中,schema 的属性是 undefined、cadet 和 first-name。此外,为了在调用 API 之前设置 setFormattedInput 对象,我需要实例化具有它的函数,但由于 React 规则,调用 updateInput(); 当组件被渲染并且未定义时运行(有点像功能组件需要 componentDidUpdate() )。

这应该很常见——除非您从头开始构建应用程序,否则我们都需要在表单状态对象到达 API 之前重新格式化它们。有人知道怎么做吗?

为了提供一些上下文,NPM 包映射器做了需要做的事情,但它根本不起作用(https://www.npmjs.com/package/mapper)。

0 投票
1 回答
14986 浏览

javascript - 如何使用酶作为实例()测试功能组件内部的方法,为浅包装器返回 null?

假设我有一个像这样的简单组件。

我想用 jest 和酵素编写测试用例。但counter.instance()总是返回 null。任何帮助将不胜感激。

0 投票
1 回答
58 浏览

reactjs - 从父(功能组件)中的子(基于类的组件)调用方法

我已经开发一个项目三个月了。我需要从父组件(功能组件)中的子组件(基于类的组件)调用一个方法。我为此使用了 ref ,但它没有用。这是父组件:

onDeleteSearchableFilterItem 方法属于子组件。

0 投票
1 回答
1439 浏览

react-native - 功能组件中的 Animated.spring 不适用于 onPress?

我将创建一个通过单击按钮运行的动画,我通过 Animated.timing 顺利完成此操作,没有任何问题,但是当我尝试通过 Animated.spring 运行动画时,它只运行一次,下次点击不会t 工作 我该如何解决这个问题?Animated.spring 在功能组件中运行流畅吗?这是我的代码

0 投票
1 回答
1856 浏览

arrays - 链接多个过滤器和数组排序的功能组件

我有一个显示在网格中的对象数组。目标是对数据进行多个过滤器 - 一个按特定列中的文本,一个按不同的日期范围,然后按升序/降序对每一列进行排序,并且还有分页(我已经有了这个的帮助函数到位)。我的第一种方法是有多个 useEffects,我在其中过滤/排序我的数据并更新状态。问题是设置状态的函数显然不会立即更新状态,因此在每个下一个 useEffect 中,我没有使用前一个数据过滤的数据,而是使用原始数据。基本上我需要在原始数组上链接 3 个过滤方法,然后按此顺序排序,然后分页,但我不想进行一些过滤/排序,除非用户更改了设置。任何有关解决此问题的最佳方法的想法都值得赞赏。这是一个快速的非工作原型。https://codesandbox.io/s/peaceful-nigh-jysdy用户可以随时更改过滤器,所有 3 都应该生效,我还需要设置一个初始配置来保存初始过滤器值

0 投票
1 回答
214 浏览

reactjs - 在 Gatsby 生产环境中使用三个 OBJLoader

我正在尝试在我的 gatsby 项目中添加一个threejs 场景。

在流了一些血之后,我让它在开发和构建中正常工作,但是在提供应用程序时,我得到了 3 次以下错误:

我通过日志确定使用 OBJLoader 构造函数时出现错误。我怎样才能让它工作?

我基本上是这样设置的:

0 投票
2 回答
4742 浏览

javascript - Hooks 只能在函数组件的主体内部调用。(fb.me/react-invalid-hook-call)

使用此代码,我有错误,例如 × Hooks 只能在函数组件的主体内调用。

在此处输入图像描述