React中，实现强制组件重新渲染，状态重置

最新推荐文章于 2026-05-19 07:44:47 发布
原创 最新推荐文章于 2026-05-19 07:44:47 发布 · 170 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
标签
#react.js #前端 #前端框架

使用背景：在一个详情弹窗组件中，引用了搜索组件，每次关闭详情弹窗后再次打开，搜索组件中的值依然显示上次输入或者选择的值。

需求：每次关闭详情弹窗以后再次打开详情弹窗，搜索组件中表单值要重置，也就是搜索组件要重新渲染，状态进行重置。

详情弹窗代码：

import React, { forwardRef, useEffect, useMemo, useState } from 'react';
import { EditOutlined } from '@ant-design/icons';
import './templateDetail.scss';
import { TemplateRecords } from '@/api/interface/msgTemplate';
import { Button, Row, Tag } from 'antd';
import { noGroups, Option } from '@/enums/search';
import SearchBar from '@/components/SearchBar';
import CustomTable from '@/components/Table';
import { cloneDeep } from 'lodash-es';
import { getStatue, ruleEnums, columnGroups } from '@/mocks/template';
import {
    delBindMeter,
    getBindMeter,
    setBindMeter,
    getWbFlowMediumClassifyEntity,
    unBindAllApis
} from '@/api/modules/alarm';
import { getIndicators } from '@/utils/rulesDict';

interface detailFormProps {
    row: TemplateRecords;
    [key: string]: any;
}
export interface CustomFormRef {
    getForm: () => any;
    setForm: (row: TemplateRecords) => void;
    clearForm: () => void;
    validateForm: () => Promise<void>;
}
const TemplateEditForm = forwardRef<CustomFormRef | undefined, detailFormProps>(
    (props: detailFormProps, ref) => {
        // 分类获类型数据
        const [indicatorsList, setIndicatorsList] = useState<Option[]>([]);
        // 已选仪表 水种 体系 评价
        const [instrumentList, setInstrumentList] = useState<any[]>([]);
        // 新增：表格数据状态管理
        const [tableData, setTableData] = useState({
            data: [],
            total: 0
        });
        // 新增：加载状态
        const [loading, setLoading] = useState(false);

        /** 表格参数及表格配置 */
        const [requestParam, setRequestParam] = useState<{
            ruleId: string;
            pageSize: number;
            pageNum: number;
            [key: string]: any;
        }>({
            ruleId: props.row?.id,
            pageSize: 10,
            pageNum: 1
        });

        // 添加一个 key 状态
        const [searchBarKey, setSearchBarKey] = useState(0);

        // 清空search表单
        const clearForm = () => {
            setRequestParam({
                ruleId: props.row?.id,
                pageSize: 10,
                pageNum: 1,
                codeOrName: '',
                belongModel: '',
                type: '',
                search: '',
                mediumClassifyId: '',
                name: ''
            });

            // 改变key强制重新渲染SearchBar
            setSearchBarKey(prev => prev + 1);
        };

        // 当 props.row变化时清空表单
        useEffect(() => {
            if (props.row?.id) {
                clearForm();
            }
        }, [props.row?.id]);

        // 获取表格数据的方法 --未绑定的仪表
        const fetchTableData = async params => {
            if (!props.row?.ruleType || !unBindAllApis[props.row?.ruleType]) return;

            setLoading(true);
            try {
                const { data: unBindData } = await unBindAllApis[props.row?.ruleType](params);
                if (unBindData) {
                    const rows = unBindData.records.map((item, index) => ({
                        no: index + 1,
                        ...item
                    }));
                    setTableData({
                        data: rows || [],
                        total: unBindData.total ?? 0
                    });
                }
            } catch (error) {
                console.error('Error fetching table data:', error);
                setTableData({ data: [], total: 0 });
            } finally {
                setLoading(false);
            }
        };

        // 表格操作改变参数
        const onParamChange = searchParams => {
            ... //代码
        };

        const getBindMeterList = () => {
            ...  //其他代码
        };

        useEffect(() => {
            getBindMeterList();
        }, [props.row]);

        // 删除
        const closeHandle = item => {
            delBindMeter(props.row?.id, item.targetId).then(res => {
                if (res) {
                    setInstrumentList(instrumentList.filter(v => v.targetId !== item.targetId));
                    fetchTableData(requestParam); // 删除后重新获取表格数据
                }
            });
        };

        // 选择对象
        const selectRow = row => {
            ...//其他代码
        };

        // 获取仪表类型
        const getIndicatorsList = async () => {
            ...//其他代码
        };

        useEffect(() => {
            console.log(props.row?.ruleType, 'props.row?.ruleType');
            setIndicatorsList([]);
            setRequestParam({
                ...requestParam,
                codeOrName: '',
                belongModel: '',
                type: '',
                search: '',
                mediumClassifyId: '',
                name: ''
            });

            getIndicatorsList();

            const newParams = {
                ...requestParam,
                ruleId: props.row?.id,
                type: props.row?.ruleType
            };
            setRequestParam(newParams);
        }, [props.row]);

        // 格式化表格数据
        const columns = useMemo(
            () =>
                cloneDeep(columnGroups[props.row?.ruleType] || []).map(item => {
                    if (item.key === 'status') {
                        item.render = (text, row) => <div>{getStatue(text)}</div>;
                    }
                    if (item.key === 'action') {
                        item.render = (text, row) => (
                            <div className="table-handle-btn">
                                <Button
                                    onClick={() => selectRow(row)}
                                    size="small"
                                    icon={<EditOutlined />}
                                >
                                    选择
                                </Button>
                            </div>
                        );
                    }
                    return item;
                }),
            [props.row?.ruleType, selectRow]
        );

        return (
            <div className="rules-template-detail">
                <Row>
                    <div>已选{ruleEnums[props.row?.ruleType]}</div>
                    <div className={'instrument-wrap'}>
                        {instrumentList.length > 0 &&
                            instrumentList.map((item, index) => (
                                <Tag
                                    style={{ marginTop: '10px' }}
                                    key={index}
                                    closeIcon
                                    onClose={e => {
                                        e.preventDefault();
                                        closeHandle(item);
                                    }}
                                >
                                    {item.targetName}
                                </Tag>
                            ))}
                    </div>
                </Row>
                <Row>
                    <div className="mb10">待选{ruleEnums[props.row?.ruleType]}</div>
                    <div style={{ width: '100%' }}>
                        <SearchBar
                            key={searchBarKey}
                            formItemList={noGroups[props.row?.ruleType]?.(indicatorsList) || []}
                            getSearchParams={onParamChange}
                            itemCol={10}
                            btnCol={10}
                            classSearch={'search-bar-wrap-rules'}
                        />
                        <CustomTable
                            tableTitle={`${ruleEnums[props.row?.ruleType]}列表`}
                            currentKey={'pageNum'}
                            columns={columns}
                            tableCondition={false}
                            rowKey="id"
                            tableData={tableData}
                            loading={loading}
                            requestParam={requestParam}
                            onParamChange={onParamChange}
                        />
                    </div>
                </Row>
            </div>
        );
    }
);
TemplateEditForm.displayName = 'TemplateEditForm';
export default TemplateEditForm;

关键代码：

// 添加一个 key 状态
        const [searchBarKey, setSearchBarKey] = useState(0);

        // 清空search表单
        const clearForm = () => {
            setRequestParam({
                ruleId: props.row?.id,
                pageSize: 10,
                pageNum: 1,
                codeOrName: '',
                belongModel: '',
                type: '',
                search: '',
                mediumClassifyId: '',
                name: ''
            });

            // 改变key强制重新渲染SearchBar
            setSearchBarKey(prev => prev + 1);
        };

        // 当 props.row变化时清空表单
        useEffect(() => {
            if (props.row?.id) {
                clearForm();
            }
        }, [props.row?.id]);

此外，也可以通过 ref 控制 SearchBar 组件重置，首先给 SearchBar 组件添加重置方法：

// SearchBar 组件中添加
export interface SearchBarRef {
    resetForm: () => void;
}

const SearchBar = forwardRef<SearchBarRef, any>((props, ref) => {
    const [form] = Form.useForm();
    
    // 暴露重置方法
    useImperativeHandle(ref, () => ({
        resetForm: () => {
            form.resetFields();
        }
    }));
    
    // ... 其他代码
});

然后在详情弹窗中使用：

const TemplateEditForm = forwardRef<CustomFormRef | undefined, detailFormProps>(
    (props: detailFormProps, ref) => {
        // 添加 SearchBar 的 ref
        const searchBarRef = useRef<SearchBarRef>(null);
        
        // 清空表单的方法
        const clearForm = () => {
            // 清空搜索参数
            setRequestParam({
                ruleId: props.row?.id,
                pageSize: 10,
                pageNum: 1,
                codeOrName: '',
                belongModel: '',
                type: '',
                search: '',
                mediumClassifyId: '',
                name: ''
            });
            
            // 清空 SearchBar 表单
            searchBarRef.current?.resetForm();
            
            // 重新获取数据
            fetchTableData({
                ruleId: props.row?.id,
                pageSize: 10,
                pageNum: 1
            });
        };

        // 当 props.row 变化时清空表单
        useEffect(() => {
            if (props.row?.id) {
                clearForm();
            }
        }, [props.row?.id]);

        // 暴露给父组件的方法
        useImperativeHandle(ref, () => ({
            getForm: () => ({/* ... */}),
            setForm: (row: TemplateRecords) => {/* ... */},
            clearForm: clearForm,
            validateForm: async () => {/* ... */}
        }));

        return (
            <div className="rules-template-detail">
                {/* ... 其他代码 */}
                <SearchBar
                    ref={searchBarRef}
                    formItemList={noGroups[props.row?.ruleType]?.(indicatorsList) || []}
                    getSearchParams={onParamChange}
                    itemCol={10}
                    btnCol={10}
                    classSearch={'search-bar-wrap-rules'}
                />
                {/* ... 其他代码 */}
            </div>
        );
    }
);

二者相比，更推荐第一种通过key强制重新渲染搜索组件，因为：

  1. 实现简单，代码改动少；

  2. 通过 React 的 key 机制自然处理重新渲染；

  3. 不需要修改 SearchBar 组件。

前端React篇之哪些方法会触发 React 重新渲染？重新渲染 render 会做些什么？
星辰迷上大海的博客
03-08 5826
在React中，组件的重新渲染可以通过setState()、forceUpdate()、props或state的改变、父组件的重新渲染以及context的改变来触发。当组件重新渲染时，React会执行render方法，生成新的虚拟DOM树
react触发组件重新渲染
enjoyjrc的博客
07-23 1238
在 React 中，重新渲染界面通常是因为组件的状态（state）或属性（props）发生了变化。通过条件判断来决定渲染什么内容。条件渲染可以根据状态或 props 的变化来动态调整界面。有时你可能需要强制重新渲染组件，可以使用 useState 来触发重新渲染。当父组件传递的 props 发生变化时，子组件会重新渲染。useEffect 用于执行副作用，例如数据获取或订阅。// 空数组表示只在组件挂载和卸载时执行。useState 用于声明状态变量。
Wolverine集群与领导选举：构建高可用分布式系统的终极指南 [特殊字符]
最新发布
gitblog_00184的博客
05-19 417
在当今云原生和微服务架构盛行的时代，构建高可用的分布式系统是企业级应用开发的核心需求。Wolverine作为一款强大的.NET消息中间件，提供了完善的集群支持和领导选举机制，让开发者能够轻松构建可靠、可扩展的分布式应用。 ## 什么是Wolverine集群？ 🤔 Wolverine集群是由多个运行实例（节点）组成的分布式系统，这些节点协同工作以处理消息和执行后台任务。每个节点都是Wolver
React重新渲染（有待更新）
喵喵喵？
09-22 2388
React 重新渲染的几种情况和原因总结
在 React 中强制重新渲染的 4 种方式
2301_78945809的博客
10-06 4329
上述的这个例子，当用户点击标题时，我们想要重新挂载/卸载整个子组件，这时可以在子组件上增加一个 key 属性，这样便实现了目的。上述更新 state 和 props 的操作不会引起组件的重新挂载/卸载，只会重新调用 render() 方法。有时候对于一些逻辑复杂的组件，我们需要重新挂载/卸载操作，以便重新渲染内容。点击按钮后，会更新 <Child /> 组件，会引起 render() 再次执行。在上面的例子中，在组件挂载完成之后更新了 state。
React重新渲染的触发机制及其优化策略
CreatorRay的博客
07-27 2510
React是一个用于构建用户界面的JavaScript库，它的核心特点之一是使用虚拟DOM（Virtual DOM）来实现高效的组件渲染。那组件重新渲染的机制是如何呢？基于这些机制，如果进行优化呢？
React 对state进行保留和重置
键指江湖的博客
04-17 1085
只要在相同位置渲染的是相同组件， React 就会保留状态。state 不会被保存在 JSX 标签里。它与你在树中放置该 JSX 的位置相关联。你可以通过为一个子树指定一个不同的 key 来重置它的 state。不要嵌套组件的定义，否则你会意外地导致 state 被重置。说明:文中例子参考React官方文档教程，不同的是这里使用TypeScript 来写,更详细的学习请移步React官方文档教程。
react保留和重置状态
woliuhuaqiangla的博客
06-03 677
当您给出组件状态时，您可能会认为该状态“存在于”组件内部。React 通过该组件在渲染树中的位置将它所持有的每个状态片段与正确的组件相关联。在 React 中，屏幕上的每个组件都具有完全隔离的状态。例如，如果并排渲染两个组件，则每个组件都将获得自己的独立和状态。React 会保留组件的状态，只要它在 UI 树中的位置被渲染。如果它被删除，或者不同的组件在同一位置被渲染，React 就会丢弃它的状态。这是因为当 React 删除一个组件时，它会破坏它的状态。只要你在树中的同一位置渲染相同的组件，
彻底解决React Spectrum TimeField时段删除重置Bug
gitblog_01100的博客
09-11 392
你是否遇到过这样的情况：在使用React Spectrum的TimeField组件时，删除小时段后整个时间突然重置？这个令人头疼的问题不仅影响用户体验，还可能导致数据录入错误。本文将深入剖析这一问题的根源，并提供完整的解决方案，让你轻松应对时间输入场景。 ## 问题现象与影响范围 当用户尝试删除TimeField中的小时段时，整个时间值会意外重置为默认值，而非保留剩余的分钟和秒数。这种行为在以...
让你的 React 组件跑得再快一点
qf2019的博客
04-12 262
性能和渲染（Render）正相关 React 基于虚拟 DOM 和高效 Diff 算法的完美配合，实现了对 DOM 最小粒度的更新。大多数情况下，React 对 DOM 的渲染效率足以我们的业务日常。但在个别复杂业务场景下，性能问题依然会困扰我们。此时需要采取一些措施来提升运行性能，其很重要的一个方向，就是避免不必要的渲染（Render）。 渲染（Render）时影响性能的点 React 处理 render 的基本思维模式是每次一有变动就会去重新渲染整个应用。在 Virtual DOM 没有出现之前，最简单
强制React组件重新渲染
Web 开发&软件开发
08-05 1万+
强制React组件重新渲染 React组件的优点是它们根据state或props的变化自动渲染和更新; 只需从任何地方更新状态，然后您的UI元素就会突然更新-太棒了！ 但是，在某些情况下，您可能只想蛮力地对React组件进行新的渲染。 注意：在大多数情况下，您永远不要强迫React组件重新渲染。 重新渲染应始终根据状态或道具更改进行。 但是，我没有判断，在某些情况下，您可能确实需要强制...
React 重新渲染指南
wangqiaojie的博客
08-11 8461
React 重新渲染的综合指南。该指南解释了什么是重新渲染，什么是必要的和不必要的重新渲染，什么情况下会触发 React 组件重新渲染。
react如何刷新当前页面_react怎么强制刷新页面？
热门推荐
weixin_35618957的博客
12-24 1万+
react强制页面刷新使用this.forceUpdate()在react中，state和props数据更新，就会重新render，但是当层级过深时，可能就不会触发渲染，这时候就要用到this.forceUpdate();默认情况下，当组件的state或props改变时，组件将重新渲染。如果你的render()方法依赖于一些其他的数据，你可以告诉React组件需要通过调用forceUpdate()...
使用ForceUpdate：深度掌握React组件强制渲染技巧
gitblog_01041的博客
08-24 1608
使用ForceUpdate：深度掌握React组件强制渲染技巧 项目介绍 UseForceUpdate 是一个简洁高效的React Hooks，它提供了一个简单的方法来强制一个React组件重新渲染，不受常规状态或属性变更检测的限制。这个库对于那些需要绕过React常规更新机制以立即刷新UI场景特别有用，比如在某些特殊情况下的数据同步或手动触发渲染需求。 项目快速启动 要开始使用 use-fo...
React组件在什么情况下会重新渲染
weixin_42333548的博客
12-25 712
当我们使用React编写组件时，组件的重新渲染是一个重要的概念。重新渲染是指React组件在特定情况下会重新执行其渲染函数，更新用户界面以反映最新的数据。很多情况下，组件不必要的重新渲染会严重影响性能，所以要充分了解触发组件重新渲染的条件。当Context的值发生变化时，订阅了该Context的组件将重新渲染。在React中，组件的props是父组件传递给子组件的数据。当这些props发生变化时，子组件将重新渲染以反映最新的数据。当一个子组件嵌套在一个父组件中时，父组件重新渲染，子组件也会重新渲染。
使react组件重新渲染的三种方式
占卜者的博客
06-05 7466
1、setState() 2、props发生变化 3、forceUpdate()
React component.forceUpdate() 强制重新渲染
352328759的博客
10-21 1万+
component.forceUpdate() 一个不常用的生命周期方法, 它的作用就是强制刷新 官网解释如下 默认情况下，当组件的 state 或 props 发生变化时，组件将重新渲染。如果 render() 方法依赖于其他数据，则可以调用 forceUpdate() 强制让组件重新渲染。 调用 forceUpdate() 将致使组件调用 render() 方法，此操作会跳过该组件的 shouldComponentUpdate()。但其子组件会触发正常的生命周期方法，包括 shouldComponen
了解 React 重渲染机制
法克瓜的博客
10-20 1250
首先，要贯彻一个思想：唯有 state 变化会导致 React 组件重渲染。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值