Hooks useState的使用

import React, { useState } from 'react'
import { View, Text, Button, Input } from '@tarojs/components'
import './index.scss' // Import Taro's style filetype Box = {num?: number | string;width?: number | string;height?: number | string;color?: string;cate?: string;material?: string;
};type Record = {time?: string,addNum?: number
}const UseStateComponent = () => {// 数值类型const [tNum, setTNum] = useState(0);// String类型const [tname, setName] = useState('start firstName');// 对象类型const [box, setBox] = useState<Box>({num: 20,width: 100,height: 150,color: 'blue'});// 数组类型const [records, setRecord] = useState<Record[]>([]);// 增加箱子数量const increaseBox = () => {setTNum(prevNum => {const newNum = prevNum + 1;setBox(prevBox => ({...prevBox,num: newNum}));return newNum;});addNewRecord()};// 减少箱子数量const decreaseBox = () => {setTNum(prevNum => {const newNum = prevNum > 0 ? prevNum - 1 : 0;setBox(prevBox => ({...prevBox,num: newNum}));return newNum;});};// 点击一次连续减少箱子的数量const moreDecreaseBox = ()=>{//在这里多次调用箱子的数量减一// decreaseBox();// decreaseBox();// decreaseBox();// decreaseBox();// decreaseBox();// decreaseBox();// // 打印连续减少后箱子的数量// console.log("连续减少后箱子的数量：box num = ", tNum);setTNum(preTNum => preTNum - 1);setTNum(preTNum => preTNum - 1);setTNum(preTNum => preTNum - 1);setTNum(preTNum => preTNum - 1);setTNum(preTNum => preTNum - 1);setTNum(preTNum => preTNum - 1);setTNum(preTNum => preTNum - 1);console.log("连续减少后箱子的数量：box num = ", tNum);}const newBoxSendToPreBox = () => {const oneBox: Box = {cate: tNum + "sci type",material: tNum + "raw material",width: Number(tNum) + 10,height: Number(tNum) + 20};setBox(prevBox => ({...prevBox,...oneBox}));}// 处理输入框变化const handleNameChange = (e) => {setName(e.detail.value);};// 处理数组类型，向数组中加入新的元素const addNewRecord = () => {// 在处理数组的元素时，要使用Array中返回新的数组的API// 比如：concat、filter、slice、map、新建一个数组再进行reverse和sort// 不要使用：push、unshift、pop、shift、splice、reverse和sortconst newRecord: Record = {time: new Date().toISOString(),addNum: 1};setRecord([...records, newRecord]);};return (<View className='container'><Text className='txt'>Box的数量 = {tNum}</Text><Text className='txt'>Box的制造商名称 = {tname}</Text><Text className='txt'>Box的宽度 = {box.width}, Box的高度 = {box.height}, color颜色 = {box.color}</Text><Text className='txt'>箱子对象 = {JSON.stringify(box)}</Text><Text className='txt'>箱子数量增加的记录 = {JSON.stringify(records)}</Text><Button className='btn' onClick={increaseBox}>箱子的数量加一</Button><Button  className='btn' onClick={decreaseBox}>箱子的数量减一</Button><Button  className='btn' onClick={moreDecreaseBox}>点击一次，连续减少箱子的数量</Button><Button  className='btn' onClick={newBoxSendToPreBox}>箱子对象的合并</Button><Inputvalue={tname}onInput={handleNameChange}placeholder='请输入制造商名称'className='input'/></View>);
}export default UseStateComponent;

.container {display: flex;flex-direction: column;padding: 20px;background-color: #ADD8E6;margin-bottom: 40px;
}.txt {padding: 35px 100px;margin-bottom: 7px;background-color: #FFE4E1;font-size: 18px;
}.btn {padding: 35px 100px;margin-bottom: 7px;background-color: #D8BFD8;font-size: 18px;
}.buttonContainer {display: flex;flex-direction: row;justify-content: space-around;margin-bottom: 20px;
}.input {background-color: white;padding: 10px;border: 1px solid #ccc;border-radius: 5px;
}

开发环境为Taro+React Native，第一段代码为tsx文件