reactjsdisqus

The same comments under different posts


I try to implement disqus-react to my website. I wrote the code following the documentation, but the comments on all posts are the same.

For the purity of the experiment, I tried to use the identifier "test123" and expected to see a new empty comment thread, but to my surprise, the comments were loaded the same as always

import React, { useState, useEffect } from 'react';
import { Container } from 'react-bootstrap';
import { useParams } from 'react-router-dom';
import Disqus from 'disqus-react';

export default function ItemDescription() {
  const [loadedItem, setLoadedItem] = useState(null);

  const { itemId } = useParams();

  useEffect(() => {
    const fetchItem = async () => {
      try {
        const responseData = await fetch(
          `${process.env.REACT_APP_BACKEND_URL}/items/${itemId}`,
        );
        setLoadedItem(responseData.item);
      } catch (error) {
        console.log(error);
      }
    };
    fetchItem();
  }, [itemId]);

  return (
    <Container>
/*Some content here*/
      <Disqus.DiscussionEmbed
        shortname={urlFromDisqusWebSite} 
        config={{
          url: myProdUrl, // https://myexample.com
          identifier: loadedItem.id, // unique on every post
          title: loadedItem.title, // unique on every post
        }}
      />
    </Container>
  );
}

Solution

  • I didn't get how but it worked for me:

    config={{
              url: `${myProdUrl}/${loadedItem.id}`, // https://myexample.com/article32
              identifier: `#${loadedItem.id}`,      // #article32
            }}