React-Hooks中setState该如何使用

2020.08.25

最近开发中有在用react hooks写,类似toodlist案例，在新增时，state数据长度已经改变了，但是return中的数据没变化

后来了解到不同的类型，setState的方式不一样，hooks中setState需要设置新的对象或者数组。

源代码：

 const [searchData, setSearchData] = useState({})//对象类型
 function handlerSearchData(name,value){
    searchData[name] = value;
    setSearchData(setSearchData)
}

此类写法是class中setState的写法模式，会发现setSearchData成功了，但是return的数据没有更新。

对象类型格式需要通过运算符(...)，拷贝出新的对象值，然后进行set.

对象中的扩展通过运算符(...)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中。 扩展运算符对对象实例的拷贝属于一种浅拷贝

新的写法结构如下：

 const handlerSearchData = useCallback(
      (name, value) => {
         let a = { [name]: value }
         let newData = {
            ...searchData,
            ...a
         }
         setSearchData(newData)
      }
   )

add todo concat返回新的对象

 const [worksList, setWorksList] = useState([])

function addEidtWorks(value) {
    let newWorkList = worksList.concat({name:value});
    setWorksList(newWorkList)
    setWord('');
    
    //或者
    worksList.push({name:value});
    setWorksList(()=>(
    	[...worksList]
    ))
    setWord('');
 }

具体类型格式如下：

数字类型

import React, { useState } from 'react';

const Index = ()=> {
  const [count, setCount] = useState(0);

  return (
    <>
      <h2>{count}</h2>
      <button onClick={()=>(setCount(count+1))}>Add</button>
    </>
  );
}

对象类型

import React, { useState } from 'react';

const Index = ()=> {
  const [obj, setObj] = useState({name:"zhangsan"});

  return (
    <>
      <h2>{obj.name}---{obj.age}</h2>	  
      <button onClick={()=> (
		setObj({
		  ...obj,
		  age:18
		})
	  )}>change-obj</button>
    </>
  );
}

数组类型

import React, { useState } from 'react';

const Index = ()=> {
  const [arr, setArr] = useState([1,2,3]);

  return (
    <>

      <h2>{arr}</h2>
      <button onClick={()=>(setArr(
		setarr(()=> {
		  arr.push(4);
		  return [...arr]
		})>change-arr</button>

    </>
  );
}

函数类型

import React, { useState } from 'react';

const Index = ()=> {
  const [func, setFunc] = useState(()=> {
	return {name:'lisi'}
  });

  return (
    <>
	 <h2>{func}</h2>
    </>
  );
}

这里的 func 指的是函数的返回值，如果返回数字类型，那就是数字，返回对象类型，那就是对象