Next.js Discord

Discord Forum

Unable to get useEffect to fire in client side component

Unanswered
Song Sparrow posted this in #help-forum
Open in Discord
Song SparrowOP
"use client";
import React, { useState, useEffect } from 'react';

// Async function to fetch data
const fetchData = async () => {
  const response = await fetch('http://127.0.0.1:8000/models');
  if (!response.ok) {
    throw new Error('Failed to fetch data');
  }
  return response.json();
};

const ModelsList = () => {
  const [models, setModels] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    console.log("Use effect fired")


    fetchData()
      .then(data => {
        setModels(data.data); // Assuming the response has a 'data' field
      })
      .catch(error => {
        setError(error);
      });
  }, []);

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  if (models.length === 0) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>OpenAI Models</h1>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Created</th>
            <th>Owned By</th>
          </tr>
        </thead>
        <tbody>
          {models.map((model, index) => (
            <tr key={model.id} style={{ backgroundColor: index % 2 === 0 ? '#f2f2f2' : 'white' }}>
              <td>{model.id}</td>
              <td>{new Date(model.created * 1000).toLocaleDateString()}</td>
              <td>{model.owned_by}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default ModelsList;

The useEffect never fires in the code above. I'm using Node 18.18.2. Any ideas?

15 Replies

Clown
Why are you fetching inside a useEffect?
Fetch the data in a server and pass it to the client component
Song SparrowOP
how should i do that ?
getstaticprops?
@Song Sparrow getstaticprops?
Clown
Are you using app router?
Cause if yes then no you dont use that, you can fetch directly in your components
Song SparrowOP
import React from 'react';
import ModelsList from '../app/components/ModelsList'; // Adjust the path as necessary
import Layout from '../app/layout'; // Adjust the path as necessary

// Async function to fetch data
const fetchData = async () => {
  console.log('Fetching data...');
  const response = await fetch('http://127.0.0.1:8000/models');
  if (!response.ok) {
    throw new Error('Failed to fetch data');
  }

  const data = await response.json();

  return data.data;
};

const ModelsPage = ({ models }) => {

  return   <Layout><ModelsList models={models} />  </Layout>;

};

export async function getServerSideProps() {
  try {
    const models = await fetchData();
    console.log('Models fetched successfully')
    console.log(models)
    return {
      props: { models }, // will be passed to the ModelsPage component as props
    };
  } catch (error) {
    console.error(error);
    return {
      props: { models: [] },
    };
  }
}

export default ModelsPage;
i was able to get it working like this
is this a reasonable way to do it?
also, i'd like to still be able ot use a client side rendering so i can make a component to paginate through this
App router or pages?
Song SparrowOP
App router
Song SparrowOP
Just for future travelers, I was looking in the wrong place. The console.log from the useeffect shows in the browser console, not the server console 🙃 I have this working properly now.

One more thing, I was unable to get the browser console.log() to load any messages because I had an outstanding error with my app router. I had to put in a body and html tag to my layout.tsx and now we're all good