react 函数组件对数组的修改和视图的更新

在之前的版本中一般使用类组件this.setState修改数据更新视图，在最新的版本中，react推荐使用函数组件，函数组件里面是没有this的，所以需要使用Hook

import { Button } from "antd"
import { useState } from "react"

export default function Role() {
    const [list, setList] = useState([
        {
            id: 1,
            name: 'zhangsan'
        },
        {
            id: 2,
            name: 'lisi'
        },
        {
            id: 3,
            name: 'wangwu'
        }
    ])

    // 添加
    const handAdd = () => {
        setList([...list, {
            id: list.length   1,
            name: 'xxxx'
        }])
    }

    // 删除
    const handClick = (item, index) => {
        // setList(list.filter(i => i.id !== list[item].id))
        // or 一般直接使用上面这种方式就可以，要是上面这种方法无效可以试试下面的方法
        let data = list
        data.splice(item, 1)
        setList([...data])
    }
    return (
        <div>
            <Button onClick={handAdd}>添加</Button>
            <RoleFrom list={list} handClick={handClick} />
        </div>
    )
}

// 子组件
function RoleFrom(props) {
    return (
        <ul>
            {
                props.list.map((item, index) => {
                    return <li key={item.id} onClick={props.handClick.bind(item, index)}>{item.name}</li>
                })
            }
        </ul>
    )
}

添加后的效果

这篇好文章是转载于：学新通技术网