我正在尝试将一组数据从实时数据库输出到 html 元素中，我从服务器获取数据并使用 setState 保存数据没有问题。我有一个来自功能组件的自定义 HTML 对象，它将输出道具，但我无法映射对象和内部对象。

下面是负责从数据库中提取数据的代码：

这是我从数据库中提取的数据。我希望能够显示每个项目的名称、ID 等。这是从服务器导出的 JSON 数据，这是通过 axios.get 调用“Past.js”复制到我的类组件的状态中

我试图在没有运气的状态下运行 .map() 调用，映射嵌套项会抛出“array.map 不是函数”。这是我到目前为止的代码：

-更新

前三个是我能够在反应中使用的，底部是使用虚拟数据，是我想要的来自上面的 JSON 数据的输出，它已应用于来自 firebase 服务器的状态。

使用 map 方法的顶部输出，底部使用来自状态的占位符数据

我能够输出此代码显示的前三个，上面的所有其他代码都是相同的：

我们正在使用 React 开发一个巨大的应用程序。我们的一种形式包括 60 多个放置在不同选项卡项上的组件。

当我尝试编辑输入时，需要 190 毫秒才能在文本框中看到键入的字符。在挖掘了几个小时的问题后，我们意识到添加一个组件会增加响应时间。然后我们确定问题出在antdesign的渲染逻辑上。然后我们使用“why-did-you-update”包对 PrimeReact 进行了尝试。结果是一样的！

当状态发生任何变化时，所有组件（包括图标 :)）都会尝试根据“你为什么更新”消息来呈现。

这是沙箱：https ://codesandbox.io/s/6w30ro2l9w

“你为什么更新”消息是错误的还是我们遗漏了什么？

我正在构建一个小型 Web 应用程序来学习 React，现在遇到了一个问题。我的任务是单击一个特定的城市名称，然后转到另一个显示该城市名称的组件。

在第二个组件上，我有一个模式对话框，我可以在其中更改城市名称。执行此操作时，我的组件仍然显示旧城市名称，而不是我从模式对话框中选择的新城市名称。当我手动刷新页面时，它确实显示了新名称。我很陌生，对这些东西做出反应并感到困惑。我应该怎么做才能呈现更新的城市名称？

SecondTable 组件：（我要显示城市名称的地方）

我选择新城市的模态对话框组件：

初始城市列表的我的主页组件：

组件路由：

我有一个反应组件，用户可以在其中上传图片，并且他还显示了上传图片的预览。他可以通过单击图像对应的删除按钮来删除图像。我正在使用 react-dropzone 。这是代码：

我的问题是即使在添加或删除图像后我的组件也不会重新渲染。另外，我已经注意不直接改变状态数组。有人，请帮忙。

这是我来自带有 firebase 的 React 项目的代码，我从早上就陷入了这个问题，请帮助我 plzzz

它给了我错误：-

导航功能

如果我用 setState 替换 Navigate

反应 说：

我正在使用 Stripe on Reactjs 开发一个支付系统。CheckoutForm 有两个父组件：每个都应包含不同订阅/定价计划的表单。因此，我想更改金额对象（在 CheckoutForm 中创建）的状态，具体取决于它是哪个父组件->，然后将其发送到服务器，付款完成。例如：Parent1：金额：2000；父 2：5000。

换句话说，我想将它从孩子传递给父母，因此父母需要为孩子提供设置父母状态的函数/方法。然后我需要调用子组件中的函数（我想？）。

任何帮助将非常感激！如果您需要更多代码片段，请告诉我。

我创建了一个自定义活动指示器类，我想从我使用它的地方控制它的隐藏/显示。

这是我所做的。

CustomActivityIndi​​cator.js

我在Login这里使用的只是为了演示

我最初将show状态设置为falsein Login，当我单击Login按钮时，我想显示ActivityIndicator.

你能指导我哪里出错了。

登录.js

谢谢R

问题

*这不完全是我的情况，但这很重要。
想象一个呈现元素列表的应用程序：

元素保持在渲染的父组件的状态ElementsList。每个元素都是一个简单的对象：

每个元素与附近的输入字段一起呈现以更改其文本：

考虑到可能有很多元素（应用程序可以处理的越多越好）。
现在的问题是我们应该如何通过这些输入来更新文本。

解决方案

我看到 2 个选项（它们的一些组合是可能的）：

1.正确的反应方式（是吗？） - 通知父组件有关更改

• 在元素：onChange={evt => onTextChange(evt.target.value)}
• 在元素列表：onTextChange={newText => onElementTextChange(el, newText)}
• 在父组件：onElementTextChange={ (element, newText) => {make new elements array with the updated element somehow; setState(elements)} }

该解决方案似乎难以实施。与下面的替代方案相比，它也很慢。输入更改时发生的事件（如果我错了，请纠正我）：

1. 通过组件链通知父组件有关更改
2. 父组件构造新元素数组并调用setState
3. 整个虚拟 DOM 得到更新（包括每个元素）
4. 更新的虚拟 DOM 与之前的虚拟 DOM 版本进行比较
5. 一个元素在真实 DOM 中更新

2.直接更新Element的propsforceUpdate()

• 将 Element 重写为类而不是功能组件
• 在元素处：onChange={evt => {element.text = evt.target.value; this.forceUpdate()}}

输入更改时发生的事件：

1. props.element.text 被改变并被forceUpdate调用
2. 虚拟 DOM 中只有一个元素被更新
3. 将虚拟 DOM（一个元素）的更新子树与旧虚拟 DOM 进行比较
4. 一个元素在真实 DOM 中更新

问题

目前我正在使用一种中间方法，但更多的是在“适当的反应方式”方面。而且速度还不够快。
我更喜欢第二种选择，它需要更少的代码，而且看起来它应该工作得更快（理论上）。

1. 使用第二种方法会显着提高性能吗？（记住有成千上万的元素）
2. 这种方法会导致哪些具体问题？是的，是的，我知道代码不那么透明，这不是它的本意。
3. 您还有其他提高性能的方法吗？我很乐意尝试更少的类似反应的建议，可能会考虑部分或完全放弃反应。

我正在使用类外部的自定义浮动文本标签，我想在其中设置状态。请问我该怎么做

当我单击按钮时，我有两个浮动文本字段，我想将状态设置为输入文本字段中输入的值。

错误是得到是

this.setState 不是函数

谢谢R

我是 React 初学者。

我有一个具有多个输入字段的父组件（InputField 子组件）。OnFocus 我想切换 Inputfield 的子项（InputFieldToolTip 组件）以显示/隐藏父组件中的方法

目前，当我设置 showHide 的状态并通过道具传递到输入字段组件时，它会切换所有工具提示组件

如何在 React 中引用单个工具提示组件？在 jQuery 中，我只会给它一个 ID 并使用一个 Dom 选择器。

示例代码（请不要将此作为实际代码，它只是代表结构和当前正在传递的内容）：

父组件

输入字段组件

工具提示组件