ref赋值页面显示异常

Question

为什么使用 ref 赋值时页面更新异常

这是接受数据的数组
let staffData = ref<{ workCode: string; [key: string]: any }[]>([])

然后初始化的时候调用接口

findAccrualStaffDetail({
  pageNum: 1,
  pageSize: 10,
  billNo: prop.currentRow.taskNo, 
  regionType: 0, 
  billType: 0,
  workCode:"" 
}).then(res => {
    const { list } = res.data    
    staffData.value = list
})

这时候页面上显示所有的数据，正常的

但是我根据条件搜索时

const handleSearch = () => {

    if (!keyword.value.trim()) {
        console.log('没有keyValue1231232131231312312');
        findAccrualStaffDetail({
            pageNum: 1,
            pageSize: 10,
            billNo: prop.currentRow.taskNo,
            regionType: 0,
            billType: 0,
            workCode: ''
        }).then(res => {
            console.log(res.data.list,'搜索后数据');
            staffData.value = res.data.list
        })
        
        return;
    }
    
    
    findAccrualStaffDetail({
        pageNum: 1,
        pageSize: 10,
        billNo: prop.currentRow.taskNo,
        regionType: 0,
        billType: 0,
        workCode: keyword.value
    }).then(res => {
        staffData.value = res.data.list
    })
}

先是workCode有值，然后过滤后的list赋值给staffData，然后清空workCode，这时候就异常了：页面上还是显示了过滤后的数据+所有的数据，相当于追加了所有的数据，为什么，我打印没有workCode的时候返回的数据是所有的数据，然后直接赋值的，为什么页面上还有过滤后的数据

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

ref赋值页面显示异常

你遇到的问题是使用 ref 赋值时页面更新异常。ref 是 React 中的一个 Hook，用于存储一个值，并且可以在组件更新时重新计算该值。

在你的情况中，你使用 ref 赋值一个数组 staffData，并且使用了 let 关键字来声明该变量。

问题可能出在以下几个方面：

1. ref 只能用于存储一个值，而你尝试赋值一个数组。
2. let 关键字在 React 中不是一个有效的赋值方式。

解决方案：

1. 使用 useState Hook 来存储数组，而不是 ref。

const [staffData, setStaffData] = useState([{ workCode: '', ... }]);

// 使用 setStaffData 函数来更新 staffData
setStaffData([...staffData, { workCode: 'newCode', ... }]);

1. 如果你确实需要使用 ref，可以使用 useRef Hook 来创建一个可读写的 ref。

const staffDataRef = useRef([{ workCode: '', ... }]);

// 使用 staffDataRef.current 来访问数组
staffDataRef.current.push({ workCode: 'newCode', ... });

记住，在使用 ref 时，需要使用 current 属性来访问 ref 中的值。