React使用 useState Hook 更新数组和对象

React组件状态

useState是一个React Hook，用于在函数组件中添加状态(state)。useState接收一个初始状态值(initial state)，并返回一个包含当前状态值和更新状态值的数组。当我们调用更新状态值的函数时，React会重新渲染组件，并将新的状态值传递给组件。使用useState可以使函数组件具有类似于类组件的状态管理能力。

useState

export default function App() {
    let index = 0;
    function handleClick(){
        index = index + 1
        console.log('index',index)
    }
    return (
        <>
            <p>{index}</p>
           <button onClick={handleClick}>点击我！！！</button>
        </>
    )
}

以上代码，我们定义了一个变量index默认为0，定义了一个handleClick方法，当我们点击方法的时候，变量index的值虽然改变了，但是页面并没有渲染。那么想要触发 React 使用新数据重新渲染组件，我们需要用到useState 。

useState  用法：

//index 是一个状态变量，setIndex 是状态 setter 函数。
const [index, setIndex] = useState(0);

提供了这两个因素:

• 一个状态变量。
• 一个状态 setter 函数来更新变量并触发 React 重新渲染组件。

我们修改一下上面的例子：

import { useState } from 'react';
export default function App() {
    //let index = 0;
    const [index,setIndex] = useState(0)
    function handleClick(){
        // index = index + 1
        setIndex(index+1)
        console.log('index',index)
    }
    return (
        <>
            <p>{index}</p>
           <button onClick={handleClick}>点击我！！！</button>
        </>
    )
}

为组件提供多个状态变量

可以在一个组件中拥有任意数量的状态变量，看下面的例子：

该组件有两个状态变量，一个数字index和一个布尔值showMore

export default function App() {
    const [index,setIndex] = useState(0)
    const [showMore,setShowMore] = useState(false)
    function handleClick(){
        setIndex(index+1)
        console.log('index',index)
    }
    function handleMore() {
        setShowMore(!showMore)
    }
    return (
        <>
            <p>{index}</p>
           <button onClick={handleClick}>点击我！！！</button>
            <br/>
            <br/>
            <button onClick={handleMore}>点击我看惊喜！！！</button>
            {showMore && <p>你今年会暴富哦！</p>}
        </>
    )
}

更新状态中的对象

状态可以存储任何 JavaScript 值，包括对象。

之前的代码，我们一直在处理数字、字符串和布尔值的状态。这些类型的 JavaScript 值是“不可变的”，意思是不可更改的或“只读的”。我们可以触发重新渲染以替换值。

我们可以使用解构赋值和展开运算符来更新状态中的对象。

例如，假设有一个状态对象：

const [person, setPerson] = useState({ name: 'John', age: 30 });

• 解构赋值更新

export default function App() {
    const [person, setPerson] = useState({ name: 'Hedy', age: 26 });
    //解构
    function changeAge() {
        setPerson({
            age:18,
            name: person.name
        })
    }
    return (
        <>
          <p>名字：{person.name}</p>
          <p>年龄：{person.age}</p>
          <button onClick={changeAge}>修改年龄</button>
        </>
    )
}

• 展开运算符更新

export default function App() {
    const [person, setPerson] = useState({ name: 'Hedy', age: 30 });
    function changeName(){
        setPerson({...person,name:'Jing'})
    }
    return (
        <>
          <p>名字：{person.name}</p>
          <p>年龄：{person.age}</p>
            <button onClick={changeName}>修改名字</button>
        </>
    )
}

更新状态中的嵌套对象

假如有这样的嵌套对象结构：

const [person, setPerson] = useState({
  name: 'Hedy',
  artwork: {
    title: '一名打工仔',
    city: '山那边',
    image: 'https://i.imgur.com/Sd1AgUOm.jpg',
  }
});

我们可以用展开运算符来修改也可以用use-immer来更新

• 展开运算符

export default function App() {
    const [person, setPerson] = useState({
        name: 'Hedy',
        artwork: {
            title: '一名打工仔',
            city: '山那边',
            image: 'https://i.imgur.com/Sd1AgUOm.jpg',
        }
    });
    function changeCity(){
        setPerson({
            ...person,
            artwork:{
                ...person.artwork,
                city: '海的那边'
            }
        })
    }

    return (
        <>
          <p>{person.artwork.city}</p>
          <button onClick={changeCity}>修改城市</button>
        </>
    )
}

虽然代码看起来比较啰嗦，但还是能实现我们的功能。

• use-immer实现

用法：

updatePerson(draft => {
  draft.artwork.city = 'Lagos';
});

要使用，先来安装依赖项：

npm install use-immer
//或者
yarn add use-immer

如下面的例子：

import { useImmer } from 'use-immer'
export default function App() {
    const [person, updatePerson] = useImmer({
        name: 'Hedy',
        artwork: {
            title: '一名打工仔',
            city: '山的那边',
            image: 'https://i.imgur.com/Sd1AgUOm.jpg',
        }
    });
    function changeCity(){
       updatePerson(draft => {
           draft.artwork.city = '海的那边'
       })
    }

    return (
        <>
          <p>{person.artwork.city}</p>
          <button onClick={changeCity}>修改城市</button>
        </>
    )
}