react如何向數(shù)組中追加值
更新時(shí)間：2022年09月01日 14:06:51 作者：otatoz
這篇文章主要介紹了react如何向數(shù)組中追加值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
react向數(shù)組中追加值
首先，渲染一個(gè)隨機(jī)數(shù)，每個(gè)一秒變換一次，效果如下：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>數(shù)組追加元素</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()方法來的，只有當(dāng)state或props改變，render（）方法才能再次調(diào)用，即組件更新
將生成的隨機(jī)數(shù)放入一個(gè)數(shù)組，效果如下：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>數(shù)組追加元素</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解構(gòu)出來，在將隨機(jī)數(shù)加進(jìn)去
注意：不能使用 arr : this.state.arr.push(Math.random()),不能使用在原數(shù)組的基礎(chǔ)上修改的方法，例如push之類,可以使用concat方法或者ES6數(shù)組拓展語法
react處理數(shù)組的值
1. 追加數(shù)組的值
通過…運(yùn)算符把數(shù)組之前的值拆分，再在后面追加值
this.state = {
? arr: []
}
add(){
? this.setState((prevSatet) => ({
? ? arr: [...prevSatet.arr, [追加的值] ]
? }))
}2. 刪除下標(biāo)為index的值
把state中arr的值拷貝到新的arr中，刪除新arr下標(biāo)為index的值后，再重新賦值回arr
主要不要直接刪除state中arr的值，然后賦值回去，這樣違反immutable的規(guī)則
this.state = {
? arr: []
}
delete(index){?
? this.setState((prevState) => {
? ? const arr = [...prevState.list]
? ? arr.splice(index, 1)
? ? return { arr }
? })
}以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
ReactRouterV6如何獲取當(dāng)前路由參數(shù)
這篇文章主要介紹了ReactRouterV6如何獲取當(dāng)前路由參數(shù)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
詳解如何在項(xiàng)目中使用jest測(cè)試react native組件
本篇文章主要介紹了詳解如何在項(xiàng)目中使用jest測(cè)試react native組件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了vscode調(diào)試react?最初的源碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友跟隨小編一起看看吧2023-11-11
react?Scheduler?實(shí)現(xiàn)示例教程
這篇文章主要為大家介紹了react?Scheduler?實(shí)現(xiàn)示例教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
react-router browserHistory刷新頁面404問題解決方法
本篇文章主要介紹了react-router browserHistory刷新頁面404問題解決方法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-12-12
詳解一個(gè)基于react+webpack的多頁面應(yīng)用配置
這篇文章主要介紹了詳解一個(gè)基于react+webpack的多頁面應(yīng)用配置，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
React useMemo與useCallabck有什么區(qū)別
useCallback和useMemo是一樣的東西，只是入?yún)⒂兴煌?，useCallback緩存的是回調(diào)函數(shù)，如果依賴項(xiàng)沒有更新，就會(huì)使用緩存的回調(diào)函數(shù)；useMemo緩存的是回調(diào)函數(shù)的return，如果依賴項(xiàng)沒有更新，就會(huì)使用緩存的return2022-12-12
前端應(yīng)用大多數(shù)是SPA（單頁應(yīng)用程序），也就是只有一個(gè)HTML頁面的應(yīng)用程序。因?yàn)樗挠脩趔w驗(yàn)更好、對(duì)服務(wù)器壓力更小，所以更受歡迎。為了有效的使用單個(gè)頁面來管理多頁面的功能，前端路由應(yīng)運(yùn)而生2022-09-09
React團(tuán)隊(duì)測(cè)試并發(fā)特性詳解
這篇文章主要為大家介紹了React團(tuán)隊(duì)測(cè)試并發(fā)特性詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要為大家介紹了Remix中mdx?table不支持表格問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05