CODEWITHSUNDEEP
reactjsreact-hooks
Andrew
Andrew

Reputation: 705

useState does not support a second callBack, what could be the easy fix?

This is my useEffect 

useEffect(() => {
    let pageId =
      props.initialState.content[props.location.pathname.replace(/\/+?$/, "/")]
        .Id;

    if (props.initialState.currentContent.Url !== props.location.
      setCurrentContent({ currentContent: { Name: "", Content: "" } }, () => {
        fetch(`/umbraco/surface/rendercontent/byid/${pageId}`, {
          credentials: "same-origin"
        })
          .then(response => {
            if (response.ok) {
              return response.json();
            }
            return Promise.reject(response);
          })
          .then(result => {
            setCurrentContent({
              currentContent: { Name: result.Name, Content: result.Content }
            });
          });
      });
    }
  }, []);

I have tried things like useCallback/useMemo but yet no luck, I'm sure this is a simple fix but I must be missing the bigger picture, thanks in advance.

Upvotes: 1

Views: 216

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281646

What you can do is write an effect that checks if the currentContent state is changed and empty and takes the necessary action. You would however need to ignore the initial render. Also unline setState in class components you don't pass on the state value as object instead just pass the updated state

const ContentPage = props => {
   const [currentContent, setCurrentContent] = useState({
    Name: props.initialState.currentContent.Name,
    Content: props.initialState.currentContent.Content
   });

  const initialRender = useRef(true);

   useEffect(() => {
     let pageId =
       props.initialState.content[props.location.pathname.replace(/\/+?$/, 
     "/")]
         .Id;
     if (
       initialRender.current &&
       currentContent.Name == "" &&
       currentContent.Content == ""
     ) {
       initialRender.current = false;
       fetch(`/umbraco/surface/rendercontent/byid/${pageId}`, {
         credentials: "same-origin"
       })
         .then(response => {
           if (response.ok) {
             return response.json();
           }
           return Promise.reject(response);
         })
         .then(result => {
           setCurrentContent({ Name: result.Name, Content: result.Content });
         });
     }
   }, [currentContent]);

   useEffect(() => {
     if (props.initialState.currentContent.Url !== props.location) {
       setCurrentContent({ Name: "", Content: "" });
     }
   }, []);
   ...
 };


 export default ContentPage;

Upvotes: 1

Related Questions