javascript - 使用 react-csv 创建和下载后，csv 文件为空

Question

我构建了一个小型 React 应用程序，它获取数据并以某种方式对其进行更改，然后将其下载到 csv 文件中。当我下载文件时，csv 是空的。这是我的代码：

  const [data, setData] = useState([]);
  const downloadBtn = useRef();

  useEffect(() => {
    if (data.length) {
        downloadBtn.current.link.click();
    }
  }, [data])

const compressData = () => {
    const compressedData = [];
    // do something with data
    setData(compressedData);
  }

return( 
    <button className="btn btn-light btn-outline-secondary" onClick={compressData}>Compress Transactions</button>
    <CSVLink
      ref={downloadBtn}
      className="btn btn-light btn-outline-secondary d-none" // button is hidden
      filename="transactions.csv"
      data={data}>Compress Transactions</CSVLink>
)

但是如果我将点击放在这样的 setTimeout 中，它会起作用：

setTimeout(() => {
    downloadBtn.current.link.click();
}, 1);

我真的很想知道它为什么会发生，也许会听到一个更好的方法来处理它。

标签： javascriptreactjscsvuse-effect