问题标签 [react-functional-component]

我正在使用功能组件：

我有 1 个父组件和 2 个子组件。

子 1 通过回调将数据传递给父。在父级中，回调值被接收并使用setState它分配给一个变量，并正确地发送给子 2。

但是，当 child 1 进行任何更改并通过回调将数据传递给 parent 时，Parent 不会将另一个子组件中的最新值作为 prop 传递。仍然显示旧值。

图解：

示例代码：

任何想法可能导致这样的问题？

我需要你的帮助。

我有一个基于功能的组件调用 WelcomeSlidePage。我想将功能传递给功能组件。我尝试 console.log 功能组件中的功能，在第一个状态下，console.log 正在打印该功能，但在第二个状态之后，它变得未定义。

这是我调用功能组件的组件

WebViewPage.jsx

这是我的功能组件

WelcomeSlidePage.jsx

然后这是控制台日志

请帮帮我，谢谢

我在 React 中有一个渲染@material-ui表的组件（如果重要，可以通过 React Router 访问）。在表格内部，我有一个react-select下拉菜单，但它是通过单独的组件呈现的。这是该父组件的代码：

显然GameTypeSelector，我将在第二个中呈现下拉菜单并gameTypes包含它的选项。setSelectedGameType应该更新一个本地状态变量，每次下拉更改时都会保存新值：

所以最后一件事是其他组件本身。这也很简单：

当我从下拉列表中更改值时，会发生最奇怪的事情。它更新本地selected，然后从父控制器调用该函数。该功能轮流更新selectedGameType它仍然可以正常工作并按预期工作。

但是，在更新之后，它会再次重新渲染GameTypeSelector表中的 ，然后将selected内部的值设置为来自该行的默认值useState({ value: "", label: "Please select game type" });。之后， 的父值selectedGameType也设置为空。

在浏览器中，它看起来像这样：我从下拉列表中选择一个值，将其设置在其中，更新父组件（通过不同的控制台日志计算出很多），然后重置GameTypeSelector组件并将其恢复为默认值。它只重新渲染该单个部分，表格的其余部分保持不变并且不会重新渲染，并且代码中没有任何内容触及selectedGameType其他任何地方。

知道有什么问题吗？我想我在这里遗漏了一些重要的东西，但我不知道是什么？

我有一个有按钮的页面，如果用户单击该按钮，我将使用以下功能重定向到其他页面（例如第 2 页）：

我想将一些值传递给其他页面record.id, record.name，但无法弄清楚我们可以将这些值传递给其他页面的方式..

我的另一个页面如下所示：

任何人都可以就如何重定向到其他页面以及值以及检索第 2 页中的值提出任何想法。

PS：我也在使用响应式功能组件和钩子。

提前谢谢了。

更新：

我通过了道具，但得到了一个错误，比如Cannot read property 'state' of undefined

第 2 页：我正在这样检索

第二次更新：

路由.js 文件

第 1 页：

第2页

我正在尝试使用以下代码在页面中的返回函数中的不同位置呈现数组中的值

我正在用下面这样的值填充数组

但不知何故我收到了这个错误

我不确定这段代码哪里出错了，任何人都可以让我知道上述代码在返回方法中会出现什么问题。

PS：我正在使用 react js 功能组件

提前致谢

我正在创建一个反应应用程序，其中我有两个组件，即 Parent 和 Child，但有一点需要注意，我在整个应用程序中使用无状态组件（功能组件）和挂钩。

//父.jsx

//child.jsx

该页面完美呈现，但一旦在文本框中写入它就会出现以下错误

组件正在将文本类型的受控输入更改为不受控制。输入元素不应从受控切换到不受控（反之亦然）。

我尝试了所有可能的解决方案，但这不起作用。然而，类似的功能在类组件中完美运行，但在功能组件中却不行。任何想法？

尽管进行了许多研究，但我似乎并没有完全找到我正在寻找的东西。我正在构建一个房地产反应应用程序，在搜索页面中，我希望能够根据价格范围、卧室数量、浴室数量、房屋类型过滤结果。我看了一些教程，但我不太确定他们是否为我指明了正确的方向。我想使用功能组件，反应钩子，没有 redux 或 MobX，也没有 css 框架。是否有必要使用</form>标签？我们如何在数组上动态应用多个过滤器？因为过滤器将对从存储在数组中的 api 下载的本地数据起作用。我想尽可能多地解释。这是一个例子：

我对局部变量使用 react 钩子，例如 const [something, setSomthing] = useState('') 和 redux 用于存储使用 store 和 Provider 传递给整个组件的变量。

但有人告诉我我不应该同时使用 React Hooks 和 Redux。有人可以解释为什么，如果我不应该，我应该如何在功能组件中存储局部变量？

所以我有一个钩子，它在更改时获取输入字段值并设置变量。

更新

HooksLib.js

我想使用相同的钩子在函数调用中设置一个变量。我该怎么做呢？

如何将 event.target.id 和 event.target.value 添加到函数调用中？

我想将其添加到的功能在下面....特别///then update a variable called "fields.customerId" as the value of "customer"是位于的位置。

handleSignUpSubmit 异步函数

谢谢你的帮助！

我正在将我的基于 jQuery 的项目转换为对功能组件中的 refs 做出反应并遇到问题：我有一个巨大的单词列表，每个单词都应该通过它们自己的 ref 访问，这样我就可以根据用户的内容更改单个类名正在打字（我可以用一个巨大的状态对象来做，但性能会受到影响）。

如果我尝试访问 ref 的类列表，它是未定义的。现在我不确定 classList 是否在功能组件中通常不可用，或者 refs 是否未正确初始化：

错误：无法读取未定义的属性“添加”。

我只能找到带有 classList 的示例，但这可能不是在功能组件中添加/删除类的方法？