ReactHooks——useState使用方法

定义

 const [num,changeNum]=useState<any>(0);//定义一个num 初始值为0 修改方法为changeNum
   const [dataList, getDataList] = useState({
    data: [
      //定义一个数组进行循环
      {
        id: 1,
        name: "lili",
        likecolor: "yellow",
      },
      {
        id: 2,
        name: "pipi",
        likecolor: "red",
      },
    ],
  });

调用的方式

 return (
        <div onClick={()=>changeNum((num: number)=>num+1)}>
            {num}
        </div>
    )

全部代码

/* eslint-disable */
import React, { useEffect, useState } from "react";
const Home = () => {
  const [num, changeNum] = useState<any>(0); //定义一个num 初始值为0 修改方法为changeNum
  const [dataList, getDataList] = useState({
    data: [
      //定义一个数组进行循环
      {
        id: 1,
        name: "lili",
        likecolor: "yellow",
      },
      {
        id: 2,
        name: "pipi",
        likecolor: "red",
      },
    ],
  });
  useEffect(() => {
    console.log(dataList);
  });
  return (
    <div>
      <div onClick={() => changeNum((num: number) => num + 1)}>{num}</div>
      <div>
        {dataList?.data.map((item) => (
          <div style={{ color: item.likecolor }} key={item.id}>
            <span>{item.name}</span>
          </div>
        ))}
      </div>
    </div>
  );
};
export default Home;