Question

Now I m building a webpage that shows a ranking of items. I m fetching datas with an external javascript file and using it by putting tag in nextjs page. The script uses the window variable, so I couldn t make it API and execuse it on the serverside.

Now my page is like below.

<div>
<Script src="/weeklyRanking.js" />
</div>

在小节中,我有各种项目,这是一个阵列,我希望在以下一页中使用。

{items.map((item)=>(
 <div>{item}<div>
))}

我怎么能够把文字标签的变数上下页?

I tried below, weeklyRanking.js

let items = [item1,item2,item3];
window.items = items;

页: 1

import Script from  next/script 

const page = () => {
  const [items, setItems] = useState([]);
  }
  useEffect(() => {
    setItems(window.items)
  }, [])
  
  return (
    <>
    {items.map((item)=>(
    <div key={item}>{item}</div>
    ))}
    <Script src="/weeklyRanking.js" />
    </>
  )
}

export default page

The result is the items variable is undefined.

Answer 1

为了将外部Java文本的变数传送到您的下页,你可以修改每周排名的文字。 j 将项目变数定为全球变量。在这方面,你可以做些什么:

In weeklyRanking.js: javascript // Define the items variable as a global variable window.items = [item1, item2, item3];

// Rest of your code

In your Next.js page: jsx

import Script from  next/script ;
import { useEffect, useState } from  react ;

function YourPage() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    // Access the global items variable after the script has loaded
    setItems(window.items);
  }, []);

  return (
    <div>
      {items.map((item) => (
        <div key={item}>{item}</div>
      ))}
      <Script src="/weeklyRanking.js" />
    </div>
  );
}

export default YourPage;

友情链接