问题标签 [react-16]

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 投票
0 回答
630 浏览

reactjs - React 错误:只能在函数组件的主体内部调用挂钩

我知道这是非常常见的错误Invariant Violation: Hooks can only be called inside the body of a function component,但我仍然无法弄清楚如何在我的代码中修复它。

我的理解是问题在于useMemo我的代码中的钩子?请指导我。据我了解,问题是 React 和 ReactDOM 的版本不匹配,或者与我没有正确调用我的钩子有关。父组件使用 react 15,子组件的代码参考 react 16.8 代码。

问题是特定于此代码 -

我的完整组件代码 -

有人可以指出什么问题吗?

0 投票
1 回答
123 浏览

reactjs - 酶设置错误:“Jest 遇到了意外的令牌”

我在使用 react-16 作为前端的项目中设置酶时遇到问题

当我尝试测试时出现此错误

在此处输入图像描述

这是我的package.json

测试配置文件test.config.json

设置测试配置文件setupTests.js

0 投票
2 回答
613 浏览

javascript - 传递 ReactElement 和返回 ReactElement 的函数之间的区别

ReactElement将 a作为属性传递有什么区别:

第一个案例

并传递一个返回 a 的函数ReactElement

第二种情况

我看到生命周期存在差异:

  • 每次父 react 元素更新时,Counter都会执行第二种情况的挂载循环:
  • 每次父组件渲染时,第二种情况也会丢失其状态。

我看不出它们之间有什么区别。为什么第一个案例能够保持其状态?

0 投票
1 回答
24 浏览

reactjs - 孩子的反应上下文没有改变

我从类似的问题中阅读了解决方案,但没有帮助。
这是我的简单代码:https ://codesandbox.io/s/gracious-jennings-ugqzd

我需要对其进行设置,以便它可以在类 <Two /> 中的任何位置更改变量号。感谢帮助,谢谢。

0 投票
1 回答
29 浏览

reactjs - React:如何使用 getDerivedStateFromProps() 设置组件状态。它会干扰使用相同状态变量的受控组件

我有一个接收变量作为道具的组件。getDerivedStateFromProps() 是典型的,这意味着当 nextProps.someProp 不等于 prevState.someStateVar 时,该 prop 被分配给状态变量。

我还有一个受控元素——一个与同一个状态变量相关联的 HTML 文本输入元素。

问题是,当我通过受控元素更改状态变量时, getDerivedStateFromProps() 执行并将值设置回之前收到的道具。

作为一个 React 新手,我不明白为什么会发生这种情况。上述动作只应在收到新的 prop 值时发生,就像名称“nextProps”所暗示的那样。

请建议如何获得所需的行为:

  1. 使用 prop 设置初始状态
  2. 让我的受控元素(html 输入标签)设置状态变量的下一个值
  3. 如果收到新的 prop 值,则将其分配给状态变量的下一个值
0 投票
1 回答
27 浏览

typescript - 带有 PopperJs 的工具提示,显示未定位的第一个状态

https://codesandbox.io/s/intelligent-feynman-j5wzv

如果您将鼠标悬停在按钮上,您会在第一次渲染中看到效果,然后是 Tooltip 的正确位置,正确使用 popperjs 时我是否遗漏了什么?

0 投票
1 回答
148 浏览

reactjs - 反应 16:未捕获(承诺中)错误:JSON 中位于 A 位置 0 的意外令牌 u

如果这个错误出现在我的应用程序中,所以我刚刚用 启动了一个全新的 React16 应用程序,用 启动npx create-react-app tempnpm start,打开 devtools 并收到上述消息。

它指向 contentscript.js 的第 884 行

不知道如何治愈它,所以有人有任何想法吗?

我已经在 Ubuntu Mate 和 Linux Mint 上复制了这个。

Ubuntu Mate 19.10/8GB/Chrome 版本 83.0.4103.97(官方构建)(64 位)节点 v14.4.0 npm v6.14.5

Linux Mint 19.3 Tricia/​​4GB/Chrome 版本 83.0.4103.97(官方构建)(64 位)节点 v8.10.0 npm v3.5.2

0 投票
1 回答
313 浏览

json - JSON & REACT 16.8 TypeError: _data_projects_json__WEBPACK_IMPORTED_MODULE_2__.map 不是函数

当我尝试完成以下地图功能时,会抛出错误“TypeError:data_projects_json__WEBPACK_IMPORTED_MODULE_2 _.map is not a function”。

我已经研究了我使用 map 函数的方式,或者我的 JSON 文件的结构是否正确,并且我找不到我出错的地方。

这是我的 JSON 文件:

0 投票
1 回答
237 浏览

reactjs - React:在同一个组件中的函数之间共享一个变量

我有一个函数,我应该在其中传递文件名,以便它可以到达下一个组件,但我不知道如何在功能性 React 中实现这一点。到目前为止,我有一个变量文件,它存储从下面的 API 返回的文件名

我必须在下面的函数handleClick中传递

我需要了解这将如何工作。

0 投票
0 回答
43 浏览

reactjs - 当从反应应用程序的新选项卡中打开链接时,所有选项卡上都会显示不同的信息

我陷入了困境。我正在创建一个表格组件,管理员可以在其中看到所有注册用户,就像
我使用Mobx作为商店一样

这里的用户名是指向在新选项卡中打开的用户配置文件的链接。
我面临的问题是,当我快速单击所有用户名时,配置文件会在新选项卡中打开,但配置文件信息会像“abc”配置文件信息显示 ibn“bcd”配置文件一样被打乱
,有时会显示“def”信息在“abc”等。我用谷歌搜索了很多,但不知道如何解决它。