React报错: Render methods should be a pure function of props and state

最新推荐文章于 2023-07-07 08:52:04 发布
最新推荐文章于 2023-07-07 08:52:04 发布
阅读量7k 收藏
点赞数 2
文章标签： react reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46448984/article/details/113621591
版权 
	最近在用react写移动端页面，遇到这样一个报错。一开始无从下手，解决后记录下来
	报错场景：每次刷新页面请求列表接口就报错

在这里插入图片描述
解决方法：原来是我在render里写了一个函数处理，对state里的数据进行了setState。
删掉render方法里的函数方法就行了。

记住：render里不能进行setState处理

现在就可以解释这个报错的意思了，“render方法应该是一个对于props和state纯粹的函数”，意味着不能在render里进行setState的操作。

至于为什么？？我会后续查资料继续更新，如果有知道原因的朋友可以分享一下

榴莲酥_Sara
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react-adopt：像pro一样组成render props组件
02-05
:smiling_face_with_sunglasses: React Adopt-像pro一样组成render props组件 :scroll: 表中的内容 :face_with_monocle: 为什么是React生态系统的新炒作，这是事实。 因此，当您需要一起使用多个render props组件时...
谈谈React中的Render Props模式
10-17
Render Props 模式是 React 应用中一种通用而强大的代码重用技术。它通过将一个函数作为组件的 prop（属性）传递，使得组件能够动态地渲染子组件，从而达到共享逻辑的目的。这种方式比 Higher-Order Components ...
“Render methods should be a pure function of props and state.“这报错啥原因
Meta.Qing的博客
02-17 1566
在上述示例中，render 方法中调用了 setState 方法，修改了组件的 state，这样就会触发上述错误提示。因为 setState 方法是一种副作用函数，它会修改组件的状态并触发重新渲染，如果在 render 方法中调用它，就会导致 render 方法不再是纯函数，会引发副作用和不可预期的行为。如果在 render 方法中，你使用了除了 props 和 state 之外的变量、调用了副作用函数，如修改了组件外部的状态、请求了网络数据等，就会导致该方法不再是纯函数，会触发上述错误提示。
“Render methods should be a pure function of props and state.“组件非StrictMode模式下更新两次，StrictMode模式下是四次
weixin_58659240的博客
07-07 688
代码问题片段：使用上述17行~22行，及34行的写法时，控制台将出现文章开头的报错信息，并在非StrictMode模式下出现两次“注册失败”的文字提示。解决方法：改成使用24行~29行，及37行的写法，控制台就不报错了，而且在非StrictMode模式下只出现一次“注册失败”的文字提示。控制台上述报错，且组件触发了2次更新（非严格模式下就触发了2次，StrictMode严格模式下触发了4次）。第一次分享也是记录一下，代码写得不好，如果有写的有不正确的地方，希望各位大佬指导一下。
React的render不是纯函数？ triggering nested component updates from render is not allowed
AoHang_Wang的博客
08-20 3022
“Warning: Render methods should be a pure function of props and state; triggering nested component updates from render is not allowed. If necessary, trigger nested updates in componentDidUpdate. ” 这里提供一种排查方案:这个问题可能会在开发环境中才会出现，如果你的项目中使用了mobx，并且在render中使用了.
react警告之react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18.
weixin_45866961的博客
10-08 3857
react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more:
记录一次关于react redux箭头函数的错误
wss20093035的博客
04-26 177
render里面写成 <List.ItemonClick={props.deleteItem(index)} 报错 Render methods should be a pure function of props and state. 改成下面就可以了，不使用箭头函数渲染的时候会默认执行deleteItem方法 <List.ItemonClick={()=>props.deleteItem(index)} ...
sharing-react-render-props:使用渲染道具重用组件逻辑
05-17
为了解决这个问题，React引入了一种模式，称为“渲染道具”（Render Props），这是一种巧妙的方法来共享组件之间的代码。本文将深入探讨渲染道具的概念，如何使用它以及其在重用组件逻辑中的作用。 渲染道具的核心...
React props和state属性的具体使用方法
08-27
React props 和 state 属性的具体使用方法 在 React 中，props 和 state 是两个非常重要的概念，它们都是 React 组件的核心组成部分。本篇文章将详细介绍 React props 和 state 属性的具体使用方法，并通过实例代码...
react实现pure render时bind(this)隐患需注意!
08-31
在React开发中，纯渲染（Pure Render）是一种优化性能的重要技术。它的核心思想是如果一个组件的props和state没有发生变化，那么该组件不需要重新渲染，从而避免不必要的计算和DOM操作，提升应用性能。然而，当你在...
react警告之react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18.dva
weixin_54079103的博客
06-06 1170
使用dva开发react项目时,使用react17版本的方式行不通。react警告之react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18.dva
React使用路由跳转时控制台报Cannot update during an existing state transition (such as within `render`)错误
你是我修复不了的bug，但我会用一生去维护
11-22 1077
React使用路由跳转时控制台报Cannot update during an existing state transition (such as within render).Render methods should be a pure function of props and state.错误 这个错误是最近在使用this.props.history.replace()方法进行路由跳转，跳转之后，在控制台会产生这个错误，但对实际功能并没有影响。但是有着控制台不能有警告和错误的强迫症迫使我，仔细上网
react源码分析（13）-updateQueue介绍(2)以及Lane模型
weixin_45668912的博客
12-25 2728
目录 2021SC@SDUSC 介绍getStateFromUpdate 谈谈update任务在react中的调用处理 Lane模型简介 谈谈react源码中的位运算 总结 2021SC@SDUSC 介绍getStateFromUpdate 在getStateFromUpdate函数中，通过更新任务将State进行更新。 function getStateFromUpdate<State>( workInProgress: Fiber, queue:..
React的报错问题
weixin_47390575的博客
08-19 635
react的报错问题
React常见错误（一）
qq_52126119的博客
05-13 1449
React错误：react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more:
React Native 学习之问题总结
lin1109221208的博客
08-03 1557
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of
从一个warning入手----熟悉React生命周期
章鱼小丸子
08-19 1711
之前刚刚接触React的时候，会犯的一个错误。 Warning: setState(…): Cannot update during an existing state transition (such as within render or another component’s constructor). Render methods should be a pure function...
React路上遇到的那些问题以及解决方案
热门推荐
高山上的鱼
04-01 16万+
问题1：首先必须在键名后面添加一个空格，否则报错 Module build failed: YAMLException: can notread a block mapping entry; a multiline key may not be an implicit key at line6, column 1: 必须是如：name  :'Hello world!' 还有一个可能，如下
React 报错： Cannot read properties of undefined (reading 'location')
最新发布
03-20
这个错误通常表示在React应用中尝试访问一个未定义的属性。具体来说，它指的是在某个组件中尝试读取名为'location'的属性时出错。 这个错误通常发生在使用React Router库时，当尝试在没有路由包装的组件中访问'location'属性时会出现此错误。'location'属性是React Router提供的一个对象，用于获取当前页面的URL信息。 要解决这个问题，你可以采取以下几个步骤： 1. 确保你的组件被正确地包装在Router组件中。例如，在使用React Router的情况下，你需要将组件包装在BrowserRouter或HashRouter组件中。 2. 确保你正在从正确的位置访问'location'属性。例如，如果你尝试在一个子组件中访问'location'属性，你需要通过props将其传递给子组件。 3. 如果你在函数组件中使用React Router，可以使用React Router提供的useLocation钩子来获取'location'属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值