useState 不支持第二个回调，有什么简单的解决方法？

Question

这是我的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 }
            });
          });
      });
    }
  }, []);

我已经尝试过 useCallback/useMemo 之类的方法，但仍然没有成功，我确信这是一个简单的修复，但我一定是错过了大局，在此先感谢。

Answer 1

您可以做的是编写一个效果来检查 currentContent 状态是否已更改和为空，并采取必要的操作。但是，您需要忽略初始渲染。还取消了 class 组件中的 setState，您不将状态值作为对象传递，而只是传递更新后的状态

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;

useState 不支持第二个回调，有什么简单的解决方法？

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

reactjs

react-hooks