React中useState状态变更后渲染滞后的问题排查与解决

初始数据获取逻辑 #

通过useEffect从API拉取全部数据，初始化原始数据和筛选后数据的状态：

const [items, setItems] = React.useState([]);
const [filteredItems, setFilteredItems] = React.useState([]);

useEffect(() => {
    axios.get(process.env.REACT_APP_API_URI + "item/getAll", { headers: auth }).then((res) => {
        setItems(res.data);
        setFilteredItems(res.data);
    })
    axios.get(process.env.REACT_APP_API_URI + "role/getAll", { headers: auth }).then((res) => {
        setRoles(res.data);
    })
}, [])

原筛选实现逻辑 #

触发OnChange事件时调用handleFilters方法，遍历原始数据筛选匹配角色的项，存入临时数组后更新筛选状态：

function handleFilters() {
    let tempArray = [];
    items.forEach((item) => {
        if (item.role.name.toString().toLowerCase().includes(role.toLowerCase()) && !tempArray.includes(item)) {
            tempArray.push(item);
        }
    })
    setFilteredItems(tempArray);
}

渲染逻辑 #

组件返回部分渲染筛选后的数据：

return (
    // handleFilters() 在此处触发
    {filteredItems.map((item, index) => (
        <Box key={index} sx={{ ":hover": { backgroundColor: "#F5F5F5" } }}>
            // 处理item属性的逻辑
        </Box>
    ))}
)

问题现象 #

调用handleFilters()后，filteredItems不会立即更新，渲染结果总是滞后一步。尝试将filteredItems加入useEffect依赖数组，会触发axios重复请求重置filteredItems，无法解决问题。

解决方案 #

移除多余的!tempArray.includes(item)判断（forEach仅遍历一次原始数据，不存在重复项），改用filter方法实现筛选：

const filteredItemRoles = !role ? items : items.filter(item => {
    return item.role.name.toString().toLowerCase().includes(role.toLowerCase());
})

使用filter方法可以更简洁高效地实现筛选逻辑，同时避免手动维护临时数组可能带来的状态更新异常问题。

内容的提问来源于stack exchange，提问作者zhrgci