React中useState更新异常：账单导出按钮不显示问题排查

核心错误：useMemo依赖数组未正确设置 #

你用useMemo缓存导出按钮组件时，依赖数组是空的[]，这会导致这个组件只会在首次渲染时生成一次，后续allBillsMeter状态更新时，useMemo不会重新计算，所以导出按钮的显示状态不会跟着数据变化。而表格能正常显示数据，是因为DataTable直接绑定了allBillsMeter，状态更新会触发表格重新渲染。

其他需要修正的问题 #

1. API调用参数拼写错误：reload函数里定义了projectId，但调用getAHHOpenBillsMeter时用了prId，这会导致API请求失败（虽然你说表格能显示数据，但这个拼写错误必须修正）。
2. 数组遍历方式不当：prepareBills里用map遍历却没有返回值，还特意禁用了array-callback-return的ESLint提示，不如直接用forEach更合理，避免创建无用的中间数组。

修正后的关键代码 #

修复useMemo依赖 #

const actionsMemoExportOpenBills = useMemo(
    () => (
            <div style={{width:"fit-content", height:"fit-content", left:"16px"}}>
                { 
                    allBillsMeter.length > 0 && 
                    <img onClick={generateCsv} style={{cursor: "pointer"}} alt="excel_download" src={require("assets/img/excel.svg")} width="25px" height="25px"/>
                }
            </div>
        ),
    [allBillsMeter] // 添加allBillsMeter到依赖数组，状态变化时重新渲染按钮
)

修正API参数拼写 #

const reload = () => {
    setLoader(true)
    const projectId = localStorage.getItem('projectId')

    projectId && getAHHOpenBillsMeter(projectId, selectedUser.id).then(billsMeter => {
        setLoader(false)
        setAllBillsMeter(prepareBills(billsMeter)) // 解构数组是多余的，直接传入新数组即可
    })
}   

优化prepareBills函数 #

const prepareBills = (billsMeter) => {
    const bills = []
    billsMeter.forEach((bill) => {
        bills.push({
            billMonth: bill.billMonth,
            amount: bill.amount,
            dateOfBillCreated: formatDate(getDateTimeFromSeconds(bill.dateOfBillCreated.seconds)),
            createdBy: bill.createdBy,
            remainingFee: bill.remainingFee,
        })  
    })
    return bills
}

额外优化点 #

• 判断数组是否为空可以简化为allBillsMeter.length > 0，因为allBillsMeter初始就是空数组，不会是null或undefined。
• 更新状态时不需要解构prepareBills返回的数组，因为它已经是新创建的数组，直接传入setAllBillsMeter即可。

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