异步加载数据，一键下载CSV数据，比最新检索数据落后一步答案

【问题标题】：Loading data asynchronously and downloading CSV data with a click is one step behind the latest retrieved data异步加载数据，一键下载CSV数据，比最新检索数据落后一步
【发布时间】：2020-11-13 08:21:03
【问题描述】：

使用 react-csv 包，我异步加载数据，然后尝试一键从服务器下载检索到的数据。我目前面临的问题是点击比当前状态落后一步。当组件第一次呈现时，它会下载一个空的 CSV 文件，然后在第二次单击时，它会从上一次提取中下载数据，而不是从当前/最新提取中下载数据。这与 here 描述的情况相同，但那里提到的解决方案没有在我的情况下不起作用：这里是正在处理的代码：

  const [newData, setNewData] = useState([]);
  const csvLink = React.createRef();

   const csvExport = (
    <div>
      <Button className="pull-right title-button" onClick={getData}>
        CSV Export
      </Button>
      <CSVLink data={newData} headers={headers} target="_blank" ref={csvLink}></CSVLink>
    </div>
  );

const getData = async () => {
    await getRetailLinkOutcomes(auth, startDate, endDate, 0, 0, filters, sort, sortDirection, false).then((response) => {
      setNewData(response.records);
      csvLink.current.link.click();
    });
  };

【问题讨论】：

你能解决这个问题吗？有同样的问题，数据比当前状态落后一步，需要两次点击才能下载正确的数据
更新：我通过放置 csvLink.current.link.click(); 解决了我的问题在检查数据是否不为空的 useEffect 挂钩中，并将其包装在 setTimeout 中。此处引用：github.com/react-csv/react-csv/issues/72

标签： javascript reactjs export-to-csv

【解决方案1】：

详细说明 N.A 在 cmets 中提到的内容：

  const [data, setData] = useState([])
  const [headers, setHeaders] = useState([])
  const excelRef = useRef()

验证数据的功能：

    function requestAllHistory () {
        console.log('requesting excel history')
        requestAllHistoryForExcel(function (response, error) {
        // data and headers fetched
        setData(data)
        setHeaders(headers)
    })
}

内部 useEffect

  useEffect(() => {
    if (headers.length > 0) {
      console.log('ExportExcel useEffect', headers)
      excelRef.current.link.click()
    }
  }, [headers])

不应在 UI 上显示 CSVLink (display:'none')

   return (
    <span>
      <button
        type='button'
        className='btn btn-lg btn-dark'
        onClick={() => requestAllHistory()}
      >
        <span> Export to Excel </span>
        <span className='download'></span>
      </button>
      <CSVLink
        data={data}
        headers={headers}
        filename={filename}
        ref={excelRef}
        className='hiddenExcel'
        target='_blank'
      ></CSVLink>
    </span>
  )

【讨论】：