React实现实时/局部刷新

在React项目中，经常会遇到诸如：删除某一行的同时同时刷新表格展示最新的表格，而不是删除后，手动刷新。
原先是在删除时再次调用生命周期函数中展示表格列表的函数，但会影响性能。

总结：通过JS数组修改usestate中的状态。

初始做法示例：

......

useEffect(() => {
        httpOffer()
    }, [])

//获取列表
    const httpOffer = () => {
        offerList()
            .then(res => {
                // console.log('offer', res)
                if (res.status === 200) {
                    if (res.data.code === 0) {
                        const data = res.data.data
                        data.length > 0 && data.forEach(el => {
                            el.key = el.id
                        });
                        setOffers(data)
                    } else {
                        message.error(res.data.msg)
                    }
                } else {
                    message.info('network failed')
                }
                setLoading(false)
            })
            .catch(err => {
                setLoading(false)
                throw err
            })
    }

const showModalDel = (id) => {
        delOffer({ id })
            .then(res => {
                if (res.status === 200) {
                    if (res.data.code === 0) {
                        //之前的做法，刷新页面
                        httpOffer()
                        message.info(res.data.msg)
                    } else {
                        message.error(res.data.msg)
                    }
                } else {
                    message.error('Network failed!')
                }
            })
            .catch(err => {
                throw err
            })
    }

目前可以使用JS数组和usestate进行同样的操作。

增加数据：

addOffer(params)
                .then(res => {
                    if (res.status === 200) {
                        if (res.data.code === 0) {
                            let data = res.data.data
                            //重点
                            setOffers([...offers, { key: data.id, id: data.id, ...params}])
                            
                            message.info(res.data.msg)
                            setVisible(false)
                        } else {
                            message.error(res.data.msg)
                        }
                    } else {
                        message.error('Network failed!')
                    }
                })
                .catch(err => {
                    console.log(err)
                })

修改数据：

editOffer(params)
                .then(res => {
                			//重点
                            setOffers(offers.map(item => {
                                if(item.id === params.id){
                                    item.id = params.id,
                                    item.adv_id = params.adv_id,
                                }
                                return item
                            }))
                            setVisible(false)
                })
                .catch(err => {
                    console.log(err)
                })

删除数据：

const showModalDel = (id) => {
        delOffer({ id })
            .then(res => {
                 //重点
                 setOffers(offers.filter(item => item.id != id ))
                 message.info(res.data.msg)
            })
            .catch(err => {
                throw err
            })
    }

相关数组参考：《Array》