Discussion on: Building Dynamic Breadcrumbs in NextJS

View post

I am getting an error re: async:

Effect callbacks are synchronous to prevent race conditions. Put the async function inside:
useEffect(() => {
  async function fetchData() {
    // You can await here
    const response = await MyAPI.getData(someId);
    // ...
  }
  fetchData();
}, [someId]); // Or [] if effect doesn't need props or state

Learn more about data fetching with Hooks: https://reactjs.org/link/hooks-data-fetchingeslintreact-hooks/exhaustive-deps

I followed the eslint guidance to fix and now it says that useEffect is not defined. Per chance do you have the full code I could take a look at to see what I am doing wrong? Thanks for writing this btw. Great stuff. Cheers!

FlorentinoG9 • Oct 13 '22

I fix it by doing this instead

inside the Crumb Component before the if( last) ....

    const router = useRouter()
    const [text, setText] = useState(defaultText)

    useEffect(() => {
        if ( !Boolean(textGenerator) ) return setText(defaultText)

        async function fetchData() {
            const currText = await textGenerator()
            setText(currText)
        }

        fetchData()

    }, [defaultText, textGenerator])