React使用hooks遇到的坑_state中的某几个属性数据变成了空字符

简介: 本文讨论了在React使用hooks时遇到的一个问题:state中的某些属性数据变成了空字符。作者通过在修改函数中重新解构赋值来获取最新的state值,解决了因数据更新不及时导致的问题。

起点

使用了useReducer来代替了useState,因为要提交多个数据,使用useState需要声明很多变量,所以选择组件内部的redux_____useReducer

import React, {
    useState, useEffect, useReducer,  } from 'react';
let initialState = {
   
    name: "",
    idType: "",
    personId: "",
    tel: "",
    mobile: "",
    email: "",
}
const reducerFun = (state, init) => {
   
    let obj = {
   }
    obj[init.key] = init.value
    switch (init.type) {
   
        case "changeValue":
            return {
    ...state, ...obj };
        case "getDetails":
            return {
    ...state, ...init.obj }
        case "resetValue":
            return initialState;
        default:
            return state
    }
}
const FaultTolerantManage = () => {
   
    let {
    idType, name, personId, mobile, tel, email, } = state    
    useEffect(() => {
   
      //获取默认值 ...
    }, [])
  const updateInfoFun = () => {
   
        if (name === '') {
   
            message.warning("请输入名称")
            return false;
        }
        let namereg = "[^a-zA-Z\\u4e00-\\u9fa5]"
        if (!isValidInput(name, namereg)) {
   
            message.warning('名称只允许字母、中文!')
            return false
        }
        if (email === '') {
   
            message.warning("请输入email地址")
            return false;
        }
     }

     return (
        <div>
        //类似这样讲每一个元素都进行了绑定  inputName是对数据赋值的方法
            <Input title="固定电话" placeholder="请输入" value={
   tel} onChange={
   (e) => {
   inputName('tel', e) }} />
            .....
            //绑定修改点击事件
            <button>修改</button>
        </div>
        )
  }

问题表现

我的name和email字段都是必填的,但是我将email字段值变成空,第一次点击提交是没问题的,显示email不允许为空,这时候我再次点击修改按钮,就会提示我name为空,其实我的name是有值的。
当打印的时候可以看到name确实没有值。
但是我打印state.name是有值的。

解决办法

在修改函数中再次解构赋值,获取name、email等一系列的最新值。

  const updateInfoFun = () => {
   
        let {
    idType, name, personId, mobile, tel, email, } = state
        if (name === '') {
   
            message.warning("请输入名称")
            return false;
        }
        let namereg = "[^a-zA-Z\\u4e00-\\u9fa5]"
        if (!isValidInput(name, namereg)) {
   
            message.warning('名称只允许字母、中文!')
            return false
        }
        if (email === '') {
   
            message.warning("请输入email地址")
            return false;
        }
     }

原因:可能是数据更新不及时造成的,最顶端的解构赋值拿到的值并不是最新的值,有可能是因为组件没有重新render导致没有接收到最新的属性值。

目录
相关文章
|
15天前
|
前端开发 JavaScript
React Hooks 全面解析
【10月更文挑战第11天】React Hooks 是 React 16.8 引入的新特性,允许在函数组件中使用状态和其他 React 特性,简化了状态管理和生命周期管理。本文从基础概念入手,详细介绍了 `useState` 和 `useEffect` 的用法,探讨了常见问题和易错点,并提供了代码示例。通过学习本文,你将更好地理解和使用 Hooks,提升开发效率。
49 4
|
18天前
|
前端开发
深入解析React Hooks:构建高效且可维护的前端应用
本文将带你走进React Hooks的世界,探索这一革新特性如何改变我们构建React组件的方式。通过分析Hooks的核心概念、使用方法和最佳实践,文章旨在帮助你充分利用Hooks来提高开发效率,编写更简洁、更可维护的前端代码。我们将通过实际代码示例,深入了解useState、useEffect等常用Hooks的内部工作原理,并探讨如何自定义Hooks以复用逻辑。
|
3天前
|
前端开发 JavaScript 开发者
“揭秘React Hooks的神秘面纱:如何掌握这些改变游戏规则的超能力以打造无敌前端应用”
【10月更文挑战第25天】React Hooks 自 2018 年推出以来,已成为 React 功能组件的重要组成部分。本文全面解析了 React Hooks 的核心概念,包括 `useState` 和 `useEffect` 的使用方法,并提供了最佳实践,如避免过度使用 Hooks、保持 Hooks 调用顺序一致、使用 `useReducer` 管理复杂状态逻辑、自定义 Hooks 封装复用逻辑等,帮助开发者更高效地使用 Hooks,构建健壮且易于维护的 React 应用。
12 2
|
8天前
|
前端开发 开发者
React 提供的其他重要 Hooks
【10月更文挑战第20天】React 提供了一系列强大的 Hooks,除了 `useRef` 之外,还有许多其他重要的 Hooks,它们共同构成了函数式组件开发的基础。
21 6
|
15天前
|
前端开发 JavaScript 开发者
React Hooks
10月更文挑战第13天
31 1
|
20天前
|
前端开发 JavaScript 调度
React 组件状态(State)
10月更文挑战第8天
13 1
|
20天前
|
前端开发 JavaScript API
自定义React Hooks综合指南
本文介绍了React Hooks及其在组件开发中的作用,重点讲解了自定义Hook的创建和使用方法。通过实例展示了如何创建`useWindowWidth`、`useFetch`和`useForm`等自定义Hook,并分享了使用自定义Hook的最佳实践。文章强调了自定义Hook在提高代码复用性和组件可维护性方面的重要性。
33 0
|
23天前
|
前端开发 JavaScript 开发者
深入理解React Hooks:提升前端开发效率的关键
【10月更文挑战第5天】深入理解React Hooks:提升前端开发效率的关键
|
23天前
|
前端开发 JavaScript API
探索React Hooks:前端开发的革命性工具
【10月更文挑战第5天】探索React Hooks:前端开发的革命性工具
|
17天前
|
前端开发 数据管理 编译器
引领前端未来:React 19的重大更新与实战指南🚀
React 19 即将发布,带来一系列革命性的新功能,旨在简化开发过程并显著提升性能。本文介绍了 React 19 的核心功能,如自动优化重新渲染的 React 编译器、加速初始加载的服务器组件、简化表单处理的 Actions、无缝集成的 Web 组件,以及文档元数据的直接管理。这些新功能通过自动化、优化和增强用户体验,帮助开发者构建更高效的 Web 应用程序。
56 1
引领前端未来:React 19的重大更新与实战指南🚀