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状态是否已更改并且为空，并采取必要的措施。但是，您将需要忽略初始渲染。同样在类组件中取消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不支持第二个CallBack，最简单的解决方法是什么？

1 个答案: