reactjs - Outputting results from react-papaparse - Stack Overflow

admin管理员组

文章数量:1334883

I'm working on a Next.js project for the first time and using react-papaparse to read data from CSVs. I've got papaparse reading the data correctly and can log it to the console, but when I try to output it on the page itself, I get nothing.

So in the example below, I get output printed in the console, but not on the page itself.

"use client";

import { useState } from "react";
import { usePapaParse } from 'react-papaparse';

const { readRemoteFile } = usePapaParse();
let output = []

readRemoteFile(file, {
  complete: (results) => {
    const data = results.data;
    for (let i = 0; i < data.length; i++) {
      let row = data[i];
      output.push(`<li>${row[2]} – ${row[1]}</li>`);
    }
  }
});

console.log(output);

return (
  <div>
    {output}
  </div>
);

What do I need to do to get output on the page?

I'm working on a Next.js project for the first time and using react-papaparse to read data from CSVs. I've got papaparse reading the data correctly and can log it to the console, but when I try to output it on the page itself, I get nothing.

So in the example below, I get output printed in the console, but not on the page itself.

"use client";

import { useState } from "react";
import { usePapaParse } from 'react-papaparse';

const { readRemoteFile } = usePapaParse();
let output = []

readRemoteFile(file, {
  complete: (results) => {
    const data = results.data;
    for (let i = 0; i < data.length; i++) {
      let row = data[i];
      output.push(`<li>${row[2]} – ${row[1]}</li>`);
    }
  }
});

console.log(output);

return (
  <div>
    {output}
  </div>
);

What do I need to do to get output on the page?

• reactjs
• next.js
• papaparse
• react-papaparse

Share Improve this question Follow edited Nov 22, 2024 at 20:52 Ali Navidi 1,03522 gold badges88 silver badges2626 bronze badges asked Nov 20, 2024 at 7:42 TyssenTyssen 1,7111919 silver badges4040 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

In React and Next.js normal Javascript variables that we define doesn't rerender the page when they change.

In this case you defined output and at first it's an empty array and then it reads the data and changes the output but it does not make your page rerender so you can't see the updated output in your page, so that is why we use states inside React applications.

In order to fix it you can use useState hook like this:

const { readRemoteFile } = usePapaParse();
const [output, setOutput] = useState([]);

readRemoteFile(file, {
  complete: (results) => {
    const data = results.data;
    for (let i = 0; i < data.length; i++) {
      let row = data[i];
      setOutput(prev => [`<li>${row[2]} – ${row[1]}</li>`, ...prev]);
    }
  }
});

console.log(output);

return (
  <div>
    {output}
  </div>
);

Using states makes your application rerender whenever the state changes so you can see the updated data.

本文标签： reactjsOutputting results from reactpapaparseStack Overflow