const getStaticProps is for fetching API, I want to run this with:

useEffect(()=>{

    getStaticProps()
  })

but I get this error:

ReferenceError: data is not defined

What is the correct way to run "const getStaticProps" with "useEffect"?

import React, { useEffect, useState } from 'react';

export const getStaticProps = async () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/photos');
  const data = await res.json();
  var i = 0;
  return {
    props: { test: data.slice(0, (i  = 10)) },
  };
};

function home({ test }) {
  useEffect(() => {
    getStaticProps();
  });

  return <h1>h1</h1>;
}
export default home;

CodePudding user response：

If you meant nextjs getStaticProps method, there is no way to use both together. That method is to fetch data on server side. But useEffect will be fired after component rendering (client side).

CodePudding user response：

You can await for the promise to settled and take value

CODESANDBOX LINK

import "./styles.css";

import React, { useEffect, useState } from "react";

export const getStaticProps = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/photos");
  const data = await res.json();
  var i = 0;
  return {
    props: { test: data.slice(0, (i  = 10)) }
  };
};

function Home({ test }) {
  useEffect(() => {
    async function fn() {
      const result = await getStaticProps();

      // Now you can use value result
      console.log(result);
    }

    fn();
  }, []);

  return <h1>h1</h1>;
}

export default function App() {
  return (
    <div>
      <Home />
    </div>
  );
}

CodePudding user response：

As I can see, you probably want to use a variable to pass it to the view. If so, you need useState hook. https://reactjs.org/docs/hooks-state.html

Here's could be a possible solution:

import React, { useEffect, useState } from 'react';  

function Home({ test }) {
  const [data, setData] = useState([]);

  const getStaticProps = async () => {
    const res = await fetch('https://jsonplaceholder.typicode.com/photos');
    const data = await res.json();
    setData(data);
  };

  useEffect(() => {
    getStaticProps();
  });

  return <h1>h1</h1>;
}
export default Home;

CodePudding user response：

we can directly fetch the response using .then from promise in useffect

 useEffect(() => {
    getStaticProps().then((res) => {
      console.log(res.props.test);
    });  

CodePudding user response：

For getStaticProps no Need to call it. when you export function with name of 'getStaticProps' next automatically call it before component mount.

import React, { useEffect, useState } from 'react';

function Home({ test }) {

  console.log(test);

  return <h1>h1</h1>;
}

export async function getStaticProps({ params }) {
  const res = await fetch('https://jsonplaceholder.typicode.com/photos');
  const data = await res.json();
  var i = 0;
  return {
    props: { test: data.slice(0, (i  = 10)) },
  };
};

export default Home;