CsvDownloader оставляет данные пустыми

Question

Я использую response-csv-downloader, все работало нормально, когда я следил за настройкой на его страницах инструкций, однако я хочу использовать переменные данные сейчас, и это, похоже, не работает должным образом. Что я пытаюсь мой сам CsvDownloader:

<CsvDownloader datas={datas.current} filename="AdminPerMonth">
    <button>Download</button>
</CsvDownloader>

Я использую useEffect для получения нужных данных при запуске

useEffect(() => {
    fetch('/transformDataToCSV', {
        method: 'GET',
        headers: {
            'Content-type': 'application/json',
        },
    }).then(res => res.json())
        .then(data => {
            datas.current = data.rows             
            console.log(datas.current)})
},[])

и самой переменной:

const datas = useRef(null);

мои данные из журнал консоли выглядит так: введите описание изображения здесь

Текущая ошибка Когда я запускаю такой код, я получаю следующую ошибку:

csv.ts:32 Uncaught (in promise) TypeError: Cannot read property 'reduce' of null
    at extractHeaderFromData (csv.ts:32)
    at csv.ts:122
    at new Promise (<anonymous>)
    at Object.<anonymous> (csv.ts:118)
    at step (index.tsx:24)
    at Object.next (index.tsx:24)
    at index.tsx:24
    at new Promise (<anonymous>)
    at push../node_modules/react-csv-downloader/dist/lib/csv.js.__awaiter (index.tsx:24)
    at Object.csv [as default] (csv.ts:116)
    at CsvDownload.<anonymous> (index.tsx:34)
    at step (index.js:600)
    at Object.next (index.js:600)
    at index.js:600
    at new Promise (<anonymous>)
    at push../node_modules/react-csv-downloader/dist/index.js.__awaiter (index.js:600)
    at CsvDownload._this.handleClick (index.tsx:32)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306)
    at executeDispatch (react-dom.development.js:389)
    at executeDispatchesInOrder (react-dom.development.js:411)
    at executeDispatchesAndRelease (react-dom.development.js:3278)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287)
    at forEachAccumulated (react-dom.development.js:3259)
    at runEventsInBatch (react-dom.development.js:3304)
    at runExtractedPluginEventsInBatch (react-dom.development.js:3514)
    at handleTopLevel (react-dom.development.js:3558)
    at batchedEventUpdates$1 (react-dom.development.js:21871)
    at batchedEventUpdates (react-dom.development.js:795)
    at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568)
    at attemptToDispatchEvent (react-dom.development.js:4267)
    at dispatchEvent (react-dom.development.js:4189)
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at discreteUpdates$1 (react-dom.development.js:21887)
    at discreteUpdates (react-dom.development.js:806)
    at dispatchDiscreteEvent (react-dom.development.js:4168)

Что я тоже пробовал Я попытался добавить заголовки, установив их одинаковыми в части datas.current и const заголовках, в результате был создан файл CSV, но он содержал только заголовки, а не данные.

Что я хочу? Я хочу, чтобы данные, которые в настоящее время записаны в datas.current, действительно отображались в файле csv при его загрузке

Answer 1

Я думаю, ваша проблема в том, что загрузчик csv выполняет рендеринг с текущим значением данных (которое равно нулю) до завершения запроса выборки, а useRef не вызывает повторного рендеринга, поэтому он все еще использует нулевое значение даже после завершения запроса.

Переключение данных в переменную состояния или добавление переменной состояния, чтобы определить, загружены ли эти данные

  const [loaded, setLoaded] = useState(false)
  useEffect(() => {
    if(!loaded){
      fetch('/transformDataToCSV', {
        method: 'GET',
        headers: {
          'Content-type': 'application/json',
        },
      }).then(res => res.json())
        .then(data => {
            datas.current = data.rows  
            setLoaded(true);           
            console.log(datas.current)})
     }
  },[])

должно решить проблему.