React--React Hooks主动更新Hooks组件

最新推荐文章于 2024-06-12 22:42:14 发布

Franklin___

最新推荐文章于 2024-06-12 22:42:14 发布

阅读量2.7k

点赞数

分类专栏： react 文章标签： react javascript

本文链接：https://blog.csdn.net/Franklin_k/article/details/115300859

版权

react 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

当我们用useState创建对象数组的时候，使用数组的index去改变数组某一项中的对象属性时，useState无法监听到，此时视图就无法更新，所以我们就需要主动强制更新视图

const [friendCircleArr, setFriendCircleArr] = useState({
        name: 'Lucy',
        avator: P1,
        content: {
            text: '今天上课好累啊',
            image: null
        },
        time: '刚刚',
        isLike: false
    }, {
        name: 'Helena',
        avator: P2,
        content: {
            text: '杰伦太帅了吧！！',
            image: [Zhou1, Zhou2, Zhou3]
        },
        time: '1分钟前',
        isLike: false
    })

此时我们去修改此对象数组

const likeClick = index => {
    const tempArr = friendCircleArr
    tempArr[index].isLike = !tempArr[index].isLike
    setFriendCircleArr(tempArr)
}

我们会发现视图并没有发生更新

此时我们就需要主动更新视图

const [refresh, setRefresh] = useState(false)
useEffect(() => {
  refresh && setRefresh(false)
}, [refresh])

// 修改之前的代码
const likeClick = index => {
    const tempArr = friendCircleArr
    tempArr[index].isLike = !tempArr[index].isLike
    setFriendCircleArr(tempArr)
    setRefresh(true)
}

创建一个refresh变量，用来控制视图更新，此时再调用likeClick方法，视图就可以正常更新了