React Hook特性中如何更新数组类型值

React中的Hook特性如果使用过的小伙伴都应该知道这对于我们进行React开发是十分有用的(不知道的小伙伴可以去官网看看https://react.docschina.org/docs/hooks-intro.html).

在我目前的大多数开发中,使用useState最多的动态赋值类型就是number、string、object.但是难免我们有时候也需要进行数组的动态赋值,如何是一个空数组还好,我们直接进行覆盖就可以了,但是如果我们数组中原本就有数据,然后我们进行数组更新时还想保留原数据,那么我们应该怎么办呢?

一、空数组状态

import React,{useState,useEffect} from 'react;//使用Hook特性必须引入useState,useEffect

const Test=({id})=>{
    const [tags,setTags]=useState([]);
    
    //假设进行请求返回的数据是以数组类型返回
    useEffect(()=>{
        query().then(res=>{
            setTags(res); //这里直接进行覆盖即可
        })
    },[id])
}

二、含有初始值,想保留初始值

import React,{useState,useEffect} from 'react';

const Test=({id})=>{
    const [tags,setTags]=useState(['很有想法的', '专注开发', '大帅哥', '坏叔叔', '动漫爱好者', '吃不胖']); //设定含有初始值
    
    //假设请求返回的数据类型为数组类型
    useEffect(()=>{
        query.then(res=>{
            setTags([...tags,...res]); //这里通过使用扩展运算符将初始值与获取的值进行合并为新的数组再进行覆盖
        })
    
    },[id])

}