当前位置:首页 > JavaScript > 正文内容

React中useState如何给对象中的某一个属性赋值

flowstone5年前 (2021-01-02)JavaScript993

问题描述

在React文件中使用了useState,定义了查询条件,这个查询条件实际上是一个对象,如下所示

const [requestParam, setRequestParam] = useState({
    pageNum: 1,
    pageSize: 2,
    startTime: "",
    endTime: "",
    mobile: "",
    sort: "",
    sortField: ""
});

这些参数是查询接口的请求参数,在一般情况下,我们只需要更新其中一个属性的值,在使用setRequestParam修改这些值时,会提示需要给所有参数赋值,如何才能更新某一个值呢?

问题解决

通过Google查询了一下,终于在stackoverflow网站上,看到了大佬们的解答,问题是两年前的问题,我从中找一个容易理解答案,如下所示

setRequestParam(param => ({
    ...param,    //如果我要改变mobile的值可以这样写
    mobile: '13100008888'}));

看到上面的答案,应该知道采用es中的解构赋值来更新某个值


扫描二维码推送至手机访问。

版权声明:本文由薛尧的博客发布,如需转载请注明出处。

本文链接:https://flowstone.sourceforge.io/?id=59

分享给朋友:

相关文章

JS特效-轮播图

效果如下功能分析每隔1秒换一张图片鼠标移入停止切换、鼠标离开继续切换鼠标移入到数字上面的时候,显示和数字对应的图片,并且停止切换,被选中的数字,背景显示橙色鼠标离开数字,从该数字后面继续显示代码如下<!DOCTYPE htm...

AJAX省市县三级联动的实现

省市县数据本例子中省市县数据保存在MySQL数据库中,部分数据截图如下:从数据库中读取数据1、导入需要的jar包2、连接池配置文件<c3p0-config>     <!--&nb...

AngularJS动态特效之验证码按钮倒计时

功能需求当用户注册或者找回密码时,输入注册的手机号发送验证码到手机中,点击发送验证码按钮倒计时这个功能是如何实现呢?效果如下表单代码如下<div class="signup" ng-app=&q...

React Ant框架中分页的快速使用

使用环境ReactAnt DesignSpringBootSpring Data JPA前端页面首先,我们要查看Ant官方文档,一般涉及到分页的页面都是列表查询,在表格组件中找到API,可以从API中看到使用方法,查看文档后,编写代码如下&...

JS中绑定方法加括号和不加括号的区别

问题描述在React开发中,遇到一个页面不停调用接口问题,如下图所示 问题解决查找哪里调用了接口,最后在刷新按钮上找到了问题所在,如下所示<Button     type="...

React中如何实现文件上传功能

场景描述在前端页面中,经常会使用到文件上传功能,我们如何实现上传功能呢?开发环境React ^16.12.0Ant Design ^5.0.12SpringBoot 2.3.0页面实现文件上传首先我们要用到Ant框架中自带的上传组件Uplo...