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报错Property 'X' does not exist on type 'HTMLElement'

    解决React报错Property 'X' does not 

    这篇文章主要为大家介绍了解决React报错Property 'X' does not exist on type 'HTMLElement',有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • React useEffect的理解与使用

    React useEffect的理解与使用

    useEffect是react v16.8新引入的特性。我们可以把useEffect hook看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三个函数的组合
    2022-12-12
  • React中props使用教程

    React中props使用教程

    props是组件(包括函数组件和class组件)间的内置属性,用其可以传递数据给子节点,props用来传递参数。组件实例化过程中,你可以向其中传递一个参数,这个参数会在实例化过程中被引用
    2022-09-09
  • react Input组件Compositionstart和Compositionend事件

    react Input组件Compositionstart和Compositionend事件

    这篇文章主要为大家介绍了Compositionstart和Compositionend事件之于react组件库Input组件的坑解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • react-router-dom V6的配置使用实践

    react-router-dom V6的配置使用实践

    本文主要介绍了react-router-dom V6的配置使用实践,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • react中路由和按需加载的问题

    react中路由和按需加载的问题

    这篇文章主要介绍了react中路由和按需加载的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 归纳总结Remix 表单常用方法及示例详解

    归纳总结Remix 表单常用方法及示例详解

    这篇文章主要为大家归纳总结了Remix 表单常用方法及示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • react函数组件useState异步,数据不能及时获取到的问题

    react函数组件useState异步,数据不能及时获取到的问题

    这篇文章主要介绍了react函数组件useState异步,数据不能及时获取到的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • react 跳转后路由变了页面没刷新的解决方案

    react 跳转后路由变了页面没刷新的解决方案

    最近在学习React的过程中遇到了路由跳转后页面不刷新的问题,本文就详细的介绍一下解决方法,需要的朋友们下面随着小编来一起学习学习吧
    2021-06-06
  • 工程级 React 注册登录全栈级流程分析

    工程级 React 注册登录全栈级流程分析

    这篇文章主要介绍了工程级 React 注册登录全栈级流程,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-02-02

最新评论