问题标签 [react-lifecycle]
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.
reactjs - 如何在执行 render() 之前从 reducer 获取 prop 值?
我使用了 redux-thunk 中间件,并且仅在执行渲染后才从 props 接收值。在调用渲染之前,如何在道具中设置“内容”的值?
javascript - React 在每次重新渲染时为元素列表中的每个“null”添加一个新项目
如果你在一个数组上映射来渲染元素,并且在生成的元素数组中你有一个null
,然后是 2 个或更多具有相同键的项目,那么在每次重新渲染时,React 都会像这两个一样向 DOM添加另一个元素。
这是用于复制的最小代码:
这是 CodeSandbox 上用于使用它的相同代码:https ://codesandbox.io/s/8kqxr
请注意,当您将鼠标悬停在列表上时(因此会导致重新渲染),React 会向生成的 DOM 添加一个附加元素。
可以通过以下任一方法避免该问题:
确保唯一标识
将所有
null
元素移动到列表末尾确保没有
null
元素
我知道 React 不支持具有相同键的元素,并警告说使用它们会导致错误,但我仍然想知道究竟是什么原因造成的?有深入了解 JSX 和 React 协调的人可以向我解释一下吗?
javascript - API 调用 react、componentDidUpdate 或 eventHandler 中的事件?
理想情况下,我们应该在哪里放置一个在 React 中发生事件时进行的 api 调用
在eventHandler
orcomponentDidUpdate
里面
例子:
或者
reactjs - 为什么 componentDidUpdate 会无限更新?
我需要放一张图片,然后上传到服务器并更新界面。我有一个问题,生命周期方法 componentDidUpdate 开始无限更新,在我指示将 this.state 与 prevState 进行比较的条件下。(PrevState 未定义,我不明白为什么)。
我把我的代码放在沙箱里,希望能清楚。 https://codesandbox.io/s/headless-smoke-4xxi2
reactjs - 尝试使用我的上下文提供程序文件中的函数
我正在使用 Context-Api 并尝试在生命周期方法中使用我的文件提供的函数。该函数当然没有包含在消费者中,所以我查看了文档并将值设置为上下文。这仍然不工作。Everyting 在我返回我的类组件时工作,但组件确实挂载不起作用。
reactjs - 如何避免在以 React 基于类的组件为父级的无状态组件中进行不必要的更新
我正在学习 React,我发现 React.memo() “不起作用”,因为我的组件在我对基于父类的组件所做的每次更新时都会重新渲染。但问题是组件上的道具不会改变,至少对我来说是有意义的
我使用 useEffect 钩子在重新渲染的屏幕上打印,尽管我使用 React.memo(Men)
我希望在我的控制台中,useEffect 挂钩内的“渲染”消息只出现一次。
react-native - react-native componentWillUpdate,componentWillReceiveProps - 警告
react-native (componentWillUpdate, componentWillReceiveProps)
刷卡功能应用程序。
警告:componentWillReceiveProps 已弃用,将在下一个主要版本中删除。请改用静态 getDerivedStateFromProps。
警告:componentWillUpdate 已弃用,将在下一个主要版本中删除。请改用 componentDidUpdate。作为临时解决方法,您可以重命名为 UNSAFE_componentWillUpdate。
YellowBox.ignoreWarnings 方法不是必需的。
我会要求你更新代码。
我该如何解决?
reactjs - 如何阻止父级完全重新渲染,但仍然让子级根据“状态”的变化重新渲染?
我有一个典型的客户表格,我希望用户在提交信息之前对其进行审查。我的想法是让用户单击表单底部的“提交信息”按钮,该按钮会弹出一个汇总输入数据的弹出窗口。这个弹出窗口位于原始表单之上,包括“提交”和“编辑”按钮。“提交”按钮将信息发送到我的后端服务器并关闭弹出窗口,而“编辑”按钮关闭弹出窗口并允许用户更改客户表单中的信息。
在父组件中,我有“状态”变量,其中包括表单中的信息(“联系人”)以及是否应显示弹出窗口(“initialSubmit”)。
“initialSubmit”的值通过“show”道具传递给Modal(即弹出窗口),并告诉它显示或隐藏弹出窗口。
当我单击“提交信息”按钮时,“initialSubmit”更改为“true”,并且确实出现了弹出窗口。
但是,应用程序几乎立即重新渲染并将“initialSubmit”更改回“false”,导致弹出窗口消失。
如果“initialSubmit”的值发生了变化,我考虑过使用“shouldComponentUpdate”来停止重新渲染。但是,我下面的代码会引发错误。
我什至不知道使用“状态”变量是否是控制弹出窗口可见性的正确方法。
有什么建议么?谢谢。
reactjs - 卸载后取消 Redux 操作
我想在组件卸载后取消一些功能,因为它会导致内存泄漏我的代码看起来像这样
我想要的只是取消 graphGet 这是一个 redux 动作
javascript - 为什么在我用 componentDidMount 中的响应填写状态后,食谱没有显示在应用程序中
调用 this.state.ingredients 的 setState 方法后,页面上未显示成分数据
我尝试更改代码中的不同参数,例如 res.data.recipes 等
我映射数据的页面没有输出
这是我的console.log