[JavaScript知识库]react的useState Hook的基本使用

import { useState } from 'react';
export default function App() {
  //基本数据初始化
  const [count, setCount] = useState(0);
  const [str, setStr] = useState('您好');
  let [curentIndex, setCurentIndex] = useState(0);

  // 对象初始化
  const [obj, setObj] = useState({
    name: '余靖秋',
    age: 18,
    height: '170',
    sex: '女',
  });

  //数组初始化
  const [data, setData] = useState([
    {
      job: '前端架构',
      salary: 50000,
      age: 28,
      education: '211本科',
      WorkingYears: '5年',
    },
    {
      job: 'java架构',
      salary: 40000,
      age: 30,
      education: '双非本科',
      WorkingYears: '7年',
    },
    {
      job: '游戏主程',
      salary: 45000,
      age: 29,
      education: '双非本科',
      WorkingYears: '8年',
    },
  ]);

  //切换昵称
  const changeName = () => {
    setCurentIndex(curentIndex + 1);
    const arr = ['哈喽', 'hello', '您好嘛', '高兴见到你'];
    if (curentIndex === arr.length - 1) setCurentIndex(0);
    setStr(arr[curentIndex]);
  };

  //性别切换
  const changeSex = () => {
    let sex = obj.sex === '女' ? '男' : '女';
    setObj({ ...obj, sex });
  };

  //调整薪资
  const changeSalary = (item, index) => {
    item.salary = item.salary + 1500;
    data[index] = item;
    setData([...data]);
  };

  return (
    <div className="App">
      <p>计算结果：{count}</p>
      <button onClick={() => setCount(count + 1)}>基本数据计算</button>

      <p>{str}</p>
      <button onClick={() => changeName()}>切换昵称</button>

      <p>
        {obj.name},{obj.age},{obj.height},{obj.sex}
      </p>
      <button onClick={() => changeSex()}>性别切换</button>

      <ul>
        {data.map((item, index) => {
          return (
            <li key={index}>
              {item.job},{item.salary},{item.age},{item.education},
              {item.WorkingYears}
              <button onClick={() => changeSalary(item, index)}>
                调整薪资
              </button>
            </li>
          );
        })}
      </ul>
    </div>
  );
}