react-csv的CSVLink首次导出CSV遗漏最后一行数据如何解决

react-csv的CSVLink组件默认会在渲染阶段缓存传入的data、headers属性值。你当前直接在JSX属性位实时调用计算函数传值的写法，会导致点击导出时，行选中操作触发的状态更新还未完成渲染，组件拿到的是上一轮渲染缓存的旧选中数据集，因此选中N行时首次导出永远少1条，等第一次点击触发重渲染后，第二次点击才能拿到更新后的全量数据。

• 不要在CSVLink的属性位临时计算导出数据，提前在选中状态变化时同步计算好导出所需的数据集和表头，存为稳定的状态值或缓存值再传给组件，保证传入值和当前选中状态完全同步。
• 也可以开启组件的异步点击模式，在点击事件触发时实时拉取最新的选中数据，再执行导出动作，彻底规避旧值缓存问题。

方案1：预计算导出数据（推荐） #

提前监听交易数据、选中状态的变化，同步计算导出内容：

// 组件内定义导出相关状态
const [exportData, setExportData] = useState([]);
const [exportHeaders, setExportHeaders] = useState([]);

// 状态变化时同步更新导出数据，不要在渲染阶段临时计算
useEffect(() => {
  const selectedTrans = t.transactions.filter(item => item.selected === true);
  setExportData(selectedTrans.length ? selectedTrans : t.transactions);
  setExportHeaders(getExportTransactionHeaders(t));
}, [t.transactions, t]);

// CSVLink直接传入预计算好的稳定值
<CSVLink
  data={exportData}
  headers={exportHeaders}
  filename={t.companyName}
>
  导出CSV
</CSVLink>

方案2：异步点击实时取数 #

不需要预存状态，通过asyncOnClick配置在点击时实时获取最新数据：

<CSVLink
  data={[]}
  headers={getExportTransactionHeaders(t)}
  filename={t.companyName}
  asyncOnClick={true}
  onClick={(_, done) => {
    // 点击触发时同步获取最新选中行数据
    const latestRows = getExportTransactionRows(t.transactions);
    // 传入最新数据后执行导出
    done(latestRows);
  }}
>
  导出CSV
</CSVLink>

你原来的getExportTransactionRows函数逻辑本身没有问题，不需要修改。

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