react如何向数组中追加值
目录
- react向数组中追加值
- react处理数组的值
- 1. 追加数组的值
- 2. 删除下标为index的值
react向数组中追加值
首先，渲染一个随机数，每个一秒变换一次，效果如下：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>数组追加元素</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="xpf"></div>
<script type="text/babel">
class Xpf extends React.Component {
constructor(props){
super(props);
this.state = {
random:Math.random()
}
}
componentWillMount(){
setInterval(() => {
this.setState({
random:Math.random()
})
}, 1000);
}
render() {
let {random} = this.state;
return (
<div>
<div>
{random}
</div>
</div>
);
}
}
ReactDOM.render(
<Xpf />,
document.getElementById('xpf')
);
</script>
</body>
</html>
注意：组件更新有两种方式：props或state的改变，而改变state一般是通过setState()方法来的，只有当state或props改变，render（）方法才能再次调用，即组件更新
将生成的随机数放入一个数组，效果如下：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>数组追加元素</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="xpf"></div>
<script type="text/babel">
class Xpf extends React.Component {
constructor(props){
super(props);
this.state = {
random:Math.random(),
arr:[1,2,3]
}
}
componentWillMount(){
setInterval(() => {
this.setState({
random:Math.random(),
arr:[...this.state.arr,Math.random()]
})
}, 1000);
}
render() {
let {random,arr} = this.state;
return (
<div>
<div>
{random}
</div>
<ul>
{
arr.map((item,index)=>{
return ( <li key={index}>{item}</li>)
})
}
</ul>
</div>
);
}
}
ReactDOM.render(
<Xpf />,
document.getElementById('xpf')
);
</script>
</body>
</html>
使用...this.state.arr将arr解构出来，在将随机数加进去
注意：不能使用 arr : this.state.arr.push(Math.random()),不能使用在原数组的基础上修改的方法，例如push之类,可以使用concat方法或者ES6数组拓展语法
react处理数组的值
1. 追加数组的值
通过…运算符把数组之前的值拆分，再在后面追加值
this.state = {
arr: []
}
add(){
this.setState((prevSatet) => ({
arr: [...prevSatet.arr, [追加的值] ]
}))
}
2. 删除下标为index的值
把state中arr的值拷贝到新的arr中，删除新arr下标为index的值后，再重新赋值回arr
主要不要直接删除state中arr的值，然后赋值回去，这样违反immutable的规则
this.state = {
arr: []
}
delete(index){
this.setState((prevState) => {
const arr = [...prevState.list]
arr.splice(index, 1)
return { arr }
})
}
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
深入浅析React中diff算法
React中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DOM结构进行重绘与回流,而diff算法能够使得操作过程中只更新修改的那部分DOM结构而不更新整个DOM,这样能够最小化操作DOM结构,能够最大程度上减少浏览器重绘与回流的规模. 虚拟DOM diff算法的基础是Virtual DOM,Virtual DOM是一棵以JavaScript对象作为基础的树,
-
详解React开发必不可少的eslint配置
Eslint介绍 Eslint 是一个JavaScript验证工具,有了它可以让你的编辑器像ide一样进行一些静态的错误提示功能. 安装eslint $ npm install eslint -g 项目需要安装的插件 "babel-eslint": "^8.0.3", "eslint": "^4.13.1", "eslint-plugin-react": "^7.5.1", 配置详情 下
-
React与Redux之数组处理讲解
本文将介绍一些常用的数组处理函数和语法,如reduce().filter().map().every().some().展开运算符.这些知识和React与Redux本身没有直接关系,但是本章的示例中包含了这些函数和语法的用法,我们正好可以在程序中学习它们.另外值得一提的是,reduce().filter().map()等函数的思想来自函数式编程,感谢JavaScript是一门函数式编程语言,让原本复杂的逻辑处理变得如此简单. reduce() 概述 reduce()方法接收一个函数作为累加器(a
-
react如何向数组中追加值
目录 react向数组中追加值 react处理数组的值 1. 追加数组的值 2. 删除下标为index的值 react向数组中追加值 首先,渲染一个随机数,每个一秒变换一次,效果如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>数组追加元素</title> <script src="https://cdn.
-
php获取数组中键值最大数组项的索引值 原创
本文实例讲述了php获取数组中键值最大数组项的索引值的方法.分享给大家供大家参考.具体分析如下: 一.问题: 从给定数组中获取值最大的数组项的键值.用途如:获取班级得分最高的学生的姓名. 二.解决方法: <?php /* * Created on 2015-3-17 * Created by www.jb51.net */ $arr=array('tom'=>9,'jack'=>3,'kim'=>5,'hack'=>4); asort($arr); //print_r($ar
-
PHP list() 将数组中的值赋给变量的简单实例
list() PHP list() 用一步操作把数组中的值赋给一些变量.同 array() 一样,list() 不是真正的函数,而是语言结构. 语法: void list( mixed var, mixed ... )注意: list() 仅能用于数字索引的数组并假定数字索引从 0 开始. 例子1: <?php $arr_age = array(18, 20, 25); list($wang, $li, $zhang) = $arr_age; echo $wang; //输出:18 echo $
-
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
今天发现一个很好用二维数组排序的php方法,usort,推荐给大家,以后二维数组里面,要按照一个字段的值排序用这个方法简单高效,例如下面的数组: [guess_subject] => Array ( [0] => Array ( [subject_id] => 4587 [game_id] => 9228 [parent_category_id] => 78 [subject_title] => 全场比赛两队总得分之和是 [subject_date_time] =>
-
php计算多维数组中所有值总和的方法
本文实例讲述了php计算多维数组中所有值总和的方法.分享给大家供大家参考.具体实现方法如下: php 内置函数 array_sum() 函数返回数组中所有值的总和,只能返回一维数组的总和: 计算多维数组所有值的和就要自定义函数了: function get_sum($array) { $num = 0; foreach($array as $k => $v) { if(is_array($v)) { $num += get_sum($v); } } return $num + array_sum
-
php数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
array_count_values()定义和用法 array_count_values() 函数用于统计数组中所有值出现的次数. 本函数返回一个数组,其元素的键名是原数组的值,键值是该值在原数组中出现的次数. 语法 array_count_values(array) 参数 描述 array 必需.规定输入的数组. 例子 复制代码 代码如下: <?php $a=array("Cat","Dog","Horse","Dog"
-
java使用Hashtable过滤数组中重复值的方法
本文实例讲述了java使用Hashtable过滤数组中重复值的方法.分享给大家供大家参考,具体如下: package org.eline.core.web.support; import java.util.Hashtable; /***************************** * * @author zdw * */ public class ObjectFilter { public static void main(String[] args) { // String 测试 S
-
PHP获取数组中单列值的方法
本文实例讲述了PHP获取数组中单列值的方法.分享给大家供大家参考,具体如下: PHP中获取数组中单列的值如下: 利用PHP中的数组函数 array_column():返回数组中某个单列的值.(PHP 5.5+适用) 语法: array_column(array,column_key,index_key); 参数: array : 必需,规定必须为多维数组: column_key : 必需,需要返回的值的键名:可以是索引数组的列的整数索引,或者是关联数组的列的字符串键值.该参数也可以是 NULL,
-
vue更改数组中的值实例代码详解
根据下标更改时 vm为新建的vue对象 ind为数组 第一个e为在数组ind中e索引位置 第二个e为更改为值e vm.$set(vm.ind,e,e) 常规更改 arr为数组 //添加 arr.push(1); //删除 arr.splice(*,*); //替换 arr.splice(*,*,*); splice方法 实例 例子 1 在本例中,我们将创建一个新数组,并向其添加一个元素: <script type="text/javascript"> var arr = n
-
PHP如何删除关联数组中键值
1.使用unset()函数可以用于取消设置关联数组中的键及其值. // 声明关联数组 $arr = array( "1" => "加", "2" => "减", "3" => "乘", "4" => "除" ); // 关联数组中删除键1及其值 unset($arr['1']); // 显示数组元素 var_dump($ar