react纯函数组件setState更新页面不刷新的解决

目录
  • 问题描述：
  • 原因分析：
  • 解决方案：
  • 补：react中，hooks钩子时useState更新不渲染组件的问题

问题描述：

const [textList, setTextList] = useState(原数组);
setTextList(新数组);

当修改原数组时，如果原数组是个深层数组（不只一层），使用setTextList修改时，不会触发页面刷新

原因分析：

这个涉及到可变对象he不可变对象的知识，在vue和react中，如果更新可变对象时，可能会引起视图更新，这是因为，vue和react默认都是浅监听，只会监听数据的第一层，内层数据发生改变，并不会监听到。

解决方案：

这里我的解决方案是，先将原数组深拷贝，赋值给新数组，再修改新数组，将修改后的新数组传递进去，这样就会引起视图更新。

var lists = textList.concat();
lists.splice(index, 1);
setTextList(lists);

补：react中，hooks钩子时useState更新不渲染组件的问题

当使用react，写如图组件时，发现一个很关键的问题，当选择用class写的时候，很容易通过组件更新渲染。
当我决定用函数式组件hooks来重构我的组件的时候，发现了一个很难搞的问题，当我通过onChange去改变父组件value的时候，value的值改了，竟然没有重新渲染组件？？？？
一脸懵逼的我，于是试图将class组件时先将value设为空再赋值-----失败了
于是试图通过钩子的生命周期看了一遍。。。。------失败了
还是百度吧------发现了同样的问题。。。发现用只要再后面加slice()
于是本着先解决问题的态度，将图中红圈位置改为了onChange(value.slice())
-----于是，解决了这个神奇的问题。

现在问题解决了，回过头来看看到底怎么回事。。。
查看文档发现一句话useState里数据务必为immutable （不可赋值的对象）
也就是ass component的state也提倡使用immutable数据，但不是强制的，因为只要调用了setState就会触发更新。所以再class组件中没有出现这种问题，或者通过改变为空再赋值是可以触发更新的。
但是再使用useState时，如果在更新函数里传入同一个对象时将无法触发更新。
于是解决思路就是通过slice() 返回一个新的对象去赋值是解决问题的关键。。。。

以上就是react纯函数组件setState更新页面不刷新的解决的详细内容，更多关于react useState页面不刷新的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 示例详解react中useState的用法

    useState useState 通过在函数组件里调用它来给组件添加一些内部 state.React 会在重复渲染时保留这个 state.useState 会返回一对值:当前状态和一个让你更新它的函数,你可以在事件处理函数中或其他一些地方调用这个函数.它类似 class 组件的 this.setState,但是它不会把新的 state 和旧的 state 进行合并. 接下来通过一个示例来看看怎么使用 useState. 有这么一个需求:需要在 iframe 中加载外部网页. 初始的代码我们通过

  • react纯函数组件setState更新页面不刷新的解决

    react纯函数组件setState更新页面不刷新的解决

    目录 问题描述: 原因分析: 解决方案: 补:react中,hooks钩子时useState更新不渲染组件的问题 问题描述: const [textList, setTextList] = useState(原数组); setTextList(新数组); 当修改原数组时,如果原数组是个深层数组(不只一层),使用setTextList修改时,不会触发页面刷新 原因分析: 这个涉及到可变对象he不可变对象的知识,在vue和react中,如果更新可变对象时,可能会引起视图更新,这是因为,vue和rea

  • vue中内嵌iframe的src更新页面未刷新问题及解决

    目录 vue内嵌iframe的src更新页面未刷新 原因 解决 iframe的src指向的内容不刷新的解决方法之一 总结 vue内嵌iframe的src更新页面未刷新 vue中,系统使用iframe内嵌了其他系统的页面,iframe的src修改了,但是iframe内部页面内容未更新,也未请求接口. 原因 iframe的src中如果带hash #,src改变是不会刷新的. 解决 方式一:可以在 # 号前加一个随机数或者时间戳,但这种方式会改变url:方式二:在组件上加key,强制刷新页面. 方式一

  • Vue 数组和对象更新,但是页面没有刷新的解决方式

    在使用数组的时候,数组内部数据发生改变,但是与数组绑定的页面的数据却没有发生变化. <ul> <li v-for="(item,index) in todos" :key="index">{{item.name}}</li> </ul> data () { return { msg: 'Welcome to Your Vue.js App', todos: [{ name: 'aa', age: 14 }, { nam

  • React中路由参数如何改变页面不刷新数据的情况

    目录 React路由参数改变页面不刷新数据的情况 React页面路由 前端路由和后端路由 前端路由介绍 匹配模式 路由的执行过程 hash模式 history模式 react-router-dom API React路由参数改变页面不刷新数据的情况 路由的参数由于是在componentDidMount中获取的,如果在详情页面再次打开详情页面,由于组件并没有重新渲染,导致didMount不会获取路由参数. 因此在参数改变的时候,可以利用componentWillReceiveProps来更新变量.

  • 详解React-Router中Url参数改变页面不刷新的解决办法

    问题 今天在写页面的时候发现一个问题,就是在React Router中使用了Url传参的功能,像这样: export class MainRouter extends React.Component { render() { return ( <BrowserRouter> <Switch> ... <Route exact path={'/channel/:channelId'} component={ChannelPerPage}/> ... </Switch

  • linux环境配置nginx导致页面不刷新的解决方法

    linux环境配置nginx导致页面不刷新的解决方法

    在linux环境下,配置了nginx负载均衡,由于可能在虚拟主机的配置文件nginx.conf中,对缓存机制未配置成功,导致页面不刷新,仍然显示缓存中的内容. 最后通过注释nginx.conf文件中的相关缓存配置,然后到tmp目录下查看已生成的缓存文件,如图: 这里我们需要将proxy_cache以及proxy_temp文件删除: 重启nginx服务:sercive nginx restart 页面刷新的问题解决了...

  • 避免回车键导致的页面无意义刷新的解决方法

    仔细分析这样的页面一般都满足以下条件:1.包含FORM表单 2.只有一个文本框 这样问题就可以解决了,破坏其中任何一个条件即可,一般的做法是加一个隐藏的文本框 当然你也可以在表单 form 后面加上一个 onsubmit 事件,返回 false,来阻止 form 提交

  • 一文带你了解React中的函数组件

    目录 1. 创建方式 2. 函数组件代替类组件 3. 自定义 Hook 之 useUpdate 补充:函数组件代替 class 组件 总结 1. 创建方式 // 写法一 const Hello = (props) => { return <div>{props.message}</div> } // 写法二 const Hello = props => <div>{props.message}</div> // 写法三 function Hell

  • React函数组件useContext useReducer自定义hooks

    React函数组件useContext useReducer自定义hooks

    目录 一.hooks(useContext) 二.hooks(useReducer) 三.hooks(useContext搭配useReducer使用) 四.自定义hooks 一.hooks(useContext) 接收一个 context 对象(React.createContext 的返回值)并返回该 context 的当前值.当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定. 新建useContext.js

  • react component function组件使用详解

    react component function组件使用详解

    目录 不可改变性 虚拟dom与真实dom 函数组件 组件复用 纯函数 组件组合--组件树 组件抽离 不可改变性 1.jsx- 2.component(function)-component(class)-components(函数组件组合)-component tree(redux)-app(项目开发) 在react中,创建了js对象(react元素)就是不可更改的(immutable).就像是用相机拍照,相当于在此时间点已经定位了时间节点,只能拍下一张照片. 例如,使用底层react写一个时钟

随机推荐