React Hooks如何主动更新Hooks组件

 更新时间:2023年11月14日 17:08:54   作者:Franklin___  
这篇文章主要介绍了React Hooks如何主动更新Hooks组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

React Hooks主动更新Hooks组件

当我们用useState创建对象数组的时候,使用数组的index去改变数组某一项中的对象属性时,useState无法监听到,此时视图就无法更新,所以我们就需要主动强制更新视图

const [friendCircleArr, setFriendCircleArr] = useState({
        name: 'Lucy',
        avator: P1,
        content: {
            text: '今天上课好累啊',
            image: null
        },
        time: '刚刚',
        isLike: false
    }, {
        name: 'Helena',
        avator: P2,
        content: {
            text: '杰伦太帅了吧!!',
            image: [Zhou1, Zhou2, Zhou3]
        },
        time: '1分钟前',
        isLike: false
    })

此时我们去修改此对象数组

const likeClick = index => {
    const tempArr = friendCircleArr
    tempArr[index].isLike = !tempArr[index].isLike
    setFriendCircleArr(tempArr)
}

我们会发现视图并没有发生更新

此时我们就需要主动更新视图

const [refresh, setRefresh] = useState(false)
useEffect(() => {
  refresh && setRefresh(false)
}, [refresh])
 
// 修改之前的代码
const likeClick = index => {
    const tempArr = friendCircleArr
    tempArr[index].isLike = !tempArr[index].isLike
    setFriendCircleArr(tempArr)
    setRefresh(true)
}

创建一个refresh变量,用来控制视图更新,此时再调用likeClick方法,视图就可以正常更新了

react hooks更新、刷新子组件

import React, { Fragment, useEffect, useState, } from 'react';
import {
  Tabs,
  Button,
} from 'antd';
import { connect, history } from 'umi';
import Cmp1 from './components/cmp1';
import Cmp2 from './components/cmp2';
import Cmp3 from './components/cmp3';
import Cmp4 from './components/cmp4';
import Cmp5 from './components/cmp5';
import Cmp6 from './components/cmp6';

const { TabPane } = Tabs;

const DemoPage = () => {
  const [refresh, setRefresh] = useState(false);
  useEffect(() => {
    refresh && setTimeout(() => setRefresh(false));
  }, [refresh]);
  // tab切换
  const handleTabChange = (key) => {
    setCurrentKey(key);
  };
  //刷新,重新加载组件
  const handleReload = () => {
      setRefresh(true);
  };

  return (
    <Fragment>
      <div>
          <Button onClick={handleReload}>刷新</Button>
        <div>
          <Tabs activeKey={currentKey} onChange={handleTabChange}>
            <TabPane tab="1" key="1"></TabPane>
            <TabPane tab="2" key="2"></TabPane>
            <TabPane tab="3" key="3"></TabPane>
            <TabPane tab="4" key="4"></TabPane>
            <TabPane tab="5" key="5"></TabPane>
            <TabPane tab="6" key="6"></TabPane>
          </Tabs>
          {currentKey === '1' && !refresh && (
              <Cmp1/>
          )}
          {currentKey === '2' && !refresh && (
              <Cmp2/>
          )}
          {currentKey === '3' && !refresh && (
             <Cmp3/>
          )}
          {currentKey === '4' && !refresh && (
              <Cmp4/>
          )}
          {currentKey === '5' && !refresh && (
              <Cmp5/>
          )}
          {currentKey === '6' && !refresh && (
              <Cmp6/>
          )}
        </div>
      </div>
    </Fragment>
  );
};
export default connect()(DemoPage);

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • react同构实践之实现自己的同构模板

    react同构实践之实现自己的同构模板

    这篇文章主要介绍了react同构实践之实现自己的同构模板,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • react 路由权限动态菜单方案配置react-router-auth-plus

    react 路由权限动态菜单方案配置react-router-auth-plus

    这篇文章主要为大家介绍了react路由权限动态菜单方案react-router-auth-plus傻瓜式配置详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 在react-router4中进行代码拆分的方法(基于webpack)

    在react-router4中进行代码拆分的方法(基于webpack)

    这篇文章主要介绍了在react-router4中进行代码拆分的方法(基于webpack),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • React项目中hook实现展示对话框功能

    React项目中hook实现展示对话框功能

    Modal(模态框)是 web 开发中十分常见的组件,即从页面中弹出的对话框,下面这篇文章主要给大家介绍了关于React项目中hook实现展示对话框功能的相关资料,需要的朋友可以参考下
    2022-05-05
  • React中的路由嵌套和手动实现路由跳转的方式详解

    React中的路由嵌套和手动实现路由跳转的方式详解

    这篇文章主要介绍了React中的路由嵌套和手动实现路由跳转的方式,手动路由的跳转,主要是通过Link或者NavLink进行跳转的,实际上我们也可以通JavaScript代码进行跳转,需要的朋友可以参考下
    2022-11-11
  • React 进入页面后自动 focus 到某个输入框的解决方案

    React 进入页面后自动 focus 到某个输入框的解决方案

    React.js 当中提供了 ref 属性来帮助我们获取已经挂载的元素的 DOM 节点,你可以给某个 JSX 元素加上 ref属性,这篇文章主要介绍了React 进入页面以后自动 focus 到某个输入框,需要的朋友可以参考下
    2024-02-02
  • React受控组件与非受控组件深入讲解

    React受控组件与非受控组件深入讲解

    具体来说这是一种react非受控组件,其状态是在input的react内部控制,不受调用者控制。可以使用受控组件来实现。下面就说说这个React中的受控组件与非受控组件的相关知识,感兴趣的朋友一起看看吧
    2022-12-12
  • react项目中redux的调试工具不起作用的解决

    react项目中redux的调试工具不起作用的解决

    这篇文章主要介绍了react项目中redux的调试工具不起作用的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • 详解React组件卸载怎么中止递归方法

    详解React组件卸载怎么中止递归方法

    最近在处理项目代码的时候,出现了一个bug,组件中的方法在组件卸载后仍然在执行,代码片段发给我看,但是变量的用意我也不懂,只看到有方法调用自身方法,这不就是递归嘛,所以本文详细给大家介绍了React组件卸载怎么中止递归方法,需要的朋友可以参考下
    2024-01-01
  • react-router v6新特性总结示例详解

    react-router v6新特性总结示例详解

    在V6版本中,<Switch>组件被替换成<Routes>组件,同时,component属性被element属性替换,这篇文章主要介绍了react-router v6新特性总结,需要的朋友可以参考下
    2022-12-12

最新评论