react 封装组件的时候，改变数据setState无效

于 2022-10-05 14:59:16 发布
阅读量508 收藏
点赞数
分类专栏： react 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44076777/article/details/127172659
版权

我写react的时候喜欢使用useState,组件内也使用（错误想法）。

外部使用useState改变数据，组件内不改变，你想去外部使用查看数据的值的时候发现数据没有改变（其实已经改变了。log看不到）

解决方案，结果就是。

组件内不要使用useState，直接将传过来的值使用就好了

刘锋林
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
React Native开发封装Toast与加载Loading组件示例
10-18
在React Native开发过程中，封装通用的UI组件是一个常见且重要的实践。它不仅可以提高开发效率，还能确保应用界面风格的一致性。本知识点将详细介绍如何在React Native中封装Toast和Loading组件，并提供具体的实现...
React Form组件的实现封装杂谈
08-27
React Form组件的实现封装杂谈 在 React 框架中，Form 组件是非常常见的组件之一，它提供了与用户交互的方式，例如提交订单、设置系统等。Form 组件的实现封装可以达到简化开发的目的。本文将讨论 Form 表单组件...
react开发中setState失效的问题
An_cf的博客
08-24 5295
在react项目的开发中碰到一个奇怪的问题，setState失效。我这里提到的失效不是说的setState由于异步而造成的数据延迟问题，如果有这个问题的话，你可以通过this.forceUpdate()的方式去强制更新；言归正传，我碰到的问题是由于我的子组件使用了componentWillReceiveProps而产生的setState失效假象。查资料并实验一番，发现当调用setState时，co...
React hooks useState set数据失效
Bloxed_shangyc的博客
01-20 3724
2. 执行 addConcatA 数据不会更新，通过执行addConcatB 数据生效 ，QQ技术交流群：707 196 135 (大前端技术交流群)，原因：目前不是很确定，找到问题再更新。解决方案：通过解构的方式实现。
React中setState不起作用的情况
Always-Learning
04-21 4509
看下面这个案例 不起作用的原因 上述案例中的setState函数接收到的对象只是原有state地址的引用和原地址一样，所以不起作用 正确的使用方式 必须得传入一个新的对象，React经过对比以为发生了变化，才会去渲染，去render ...
关于react的理解—setState失效？
zhangluludeCSDN的博客
04-20 4509
setState失效？State 的更新可能是异步的 出于性能考虑，React 可能会把多个 setState() 调用合并成一个调用。 因为 this.props 和 this.state 可能会异步更新，所以你不要依赖他们的值来更新下一个状态。 // Wrong 这种不对 this.setState({ counter: this.state.counter + this.props.increment, }); 用这种方法写： // Correct this.setState((state, p
React中的 state属性设置后没反应。React中的setState设置不上
weixin_45715650的博客
09-27 519
React中的 state属性设置后没反应。React中的setState设置不上 问题描述： React中的 state属性设置后没反应。React中的setState设置不上 原因分析： 在确保代码没有问题的情况下，有一个原因是浏览器自带的 谷歌翻译会对 state造成影响，从而不会设置成功。 解决方案： 解决方案一：将 lang设置为 zh： 解决方案二： 在浏览器点击 显示原始界面： ...
React：setState详解
01-02
react之setState遇到的坑、解释setState为什么是异步的、怎样变成同步setState。。。。。。
react学习笔记之state以及setState的使用
08-28
当我们调用 setState() 时，React 会将数据合并到 this.state，然后重新渲染组件。但是，setState() 不会立即生效，React 会按照批次更新 State，然后渲染组件，即异步操作。 setState() 的参数 setState() 的第一...
React学习之受控组件与数据共享实例分析
10-15
在React开发中，受控组件（Controlled Components）和数据共享是两个重要的概念，它们对于构建可维护、可管理的应用程序至关重要。受控组件的概念源自于React如何处理表单元素的状态，而数据共享则涉及组件之间的...
React setState 没有反应
weixin_30780649的博客
04-27 946
React setState 没有反应 不多逼逼，上代码 this.setState({ Off: !this.state.Off }, function () { if(this.state.Off2==false){ this.switch() } }); setState有第二个函数，它可以执行你之后要做的操作，...
React中setState的怪异行为 ——setState没有即时生效
小敏哥的专栏
01-12 2万+
setState可以说是React中使用频率最高的一个函数了，我们都知道，React是通过管理状态来实现对组件的管理的，当this.setState()被调用的时候，React会重新调用render方法来重新渲染UI 但实际使用的时候，我们会发现，有时候我们setState之后，并没有立刻生效，例如我们看一下以下的示例代码 class Test extends Component { c...
关于reactinput框设置了value值之后不能根据state值进行更新
Benz_s600的博客
04-28 3358
前言：相信小伙伴在使用react.js的过程中，会碰到这种情况，state的值更新了，input框的value值没有更新。因为我们设置的属性是defaultValue={number}，这种可以实现手动编辑，但是不会随着state值变化而更新，我们将属性更改为value={number}之后，发现又没办法输入了，这个时候需要使用input的onChange方法去更新 1.在代码中使用input框 ...
为什么调用react setState方法不会立即改变状态？
CHCH998的博客
08-14 654
I'm reading Forms section of reactjs documentation and just tried this code to demonstrate onChange
React踩坑指南——setState不生效的解决方法
YuqiRealm.com
08-29 2万+
不生效的写法：const theQuery = Object.assign( {}, { id: '', beginDate: '', endDate: '' // 查询条件 }, _query.toJS() ); this.setState(theQuery); action.getRefundList(theQuery)可以生效的写法1：const theQuery = Object
react使用usestate踩坑
热门推荐
秋来九月八
04-22 3万+
usestate的常规用法 在react框架中，不适用类组件，使用函数式组件又想自定义数据维护业务开发的时候，就需要使用react提供的hook来完成。usestate就是最常见的一种hook。 const [name,setName] = useState('dx'); setName（'dx1'） 中括号实际是一个解构运算，第一个name是设置的值，第二个setName是只能用来改变name...
在React中，setState更新操作后没有更新state中的数据的问题。为什么setState后，没有更新到state中的值
weixin_46990115的博客
09-17 5619
问题描述：经常会看到这样一个问题，明明已经调用setState的方法了，但是state的值不改变，或者是数据改变了，但是没有重新渲染。找到了几个解决办法，记录一下。思路一、可能是setState(value)中的value值的引用地址与state的一样 就比如最常用遇到的，对象或者数组的更新操作可能失败(最常遇到) 可能是这样的:** […b]这是一个新的数组，然后扩展b数组的元素到新数组，引用地址已经不一样了 所以总结：善用…扩展运算符思路二、可能调用这个set方法的onClick点击事件，被父元素的
（原创）深入解读s React 中的useState Hook 修改了值，但是不重新渲染，不刷新的问题
qq_42753705的博客
12-09 5456
（原创）深入解读s React 中的useState Hook 修改了值，但是不重新渲染，不刷新的问题
react setState持续修改拿不到最新值的问题
总结，交流，记录，成长
03-06 2458
setState机制 react setState持续修改拿不到最新值的问题，setState()实际上可以接受一个函数作为参数，函数的首个参数就是上一次的state。 参考： 掘金 const file = {d: 1}; this.setState( prevState => { return { fileList: [...prevState.fileList, file]...
react 封装hooks组件实现数据共享
最新发布
05-22
React是一种用于构建用户界面的JavaScript库，它将应用程序拆分成小而可重用的组件。而Hooks是React 16.8版本新增的特性，它可以让你在不编写 class 的情况下使用 state 以及其他 React 特性。 在React中，数据共享可以通过Context来实现。而封装Hooks组件可以通过自定义Hooks来实现。 下面是一个简单的例子，展示如何封装Hooks组件实现数据共享： ```javascript import React, { createContext, useContext, useState } from 'react'; // 创建一个Context对象 const CounterContext = createContext(); // 自定义Hook，提供计数器状态和操作函数 function useCounter() { const [count, setCount] = useState(0); const increment = () => { setCount(count + 1); }; const decrement = () => { setCount(count - 1); }; return [count, increment, decrement]; } // CounterProvider组件，提供计数器状态和操作函数 function CounterProvider(props) { const counter = useCounter(); return ( <CounterContext.Provider value={counter}> {props.children} </CounterContext.Provider> ); } // Counter组件，使用计数器状态和操作函数 function Counter() { const [count, increment, decrement] = useContext(CounterContext); return ( <div> <p>Count: {count}</p> <button onClick={increment}>Increment</button> <button onClick={decrement}>Decrement</button> </div> ); } // 在App组件中使用CounterProvider和Counter组件 function App() { return ( <CounterProvider> <Counter /> </CounterProvider> ); } export default App; ``` 上面的例子中，我们首先定义了一个自定义Hook useCounter，用于提供计数器状态和操作函数。然后，我们创建了一个CounterContext对象，并使用CounterProvider组件来提供计数器状态和操作函数。最后，我们使用useContext Hook在Counter组件中获取计数器状态和操作函数，并渲染出来。 相关问题： 1. React中的Context是什么？ 2. Hooks是什么？有哪些常用的Hooks？ 3. 自定义Hooks有什么好处？ 4. 在React中如何实现数据共享？
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值