javascript - 如何给 React useEffect 一个布尔指标来跟踪它是否被使用？

Question

我正在做一个 React UseEffect，我希望能够设置一个指标isEffectUsed来跟踪效果是否已经发生并且数据是从 api 获取的。

export const useApi= (ApiUrl, someSettings) => {

  const [output, setOutput] = useState(null);
  let isEffectUsed= false; // "false" is pending effect, "true" is effect occurred

  useEffect(() => {
    
    const a = fetch(ApiUrl, {
        method: "post", 
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify(someSettings)})
      .then(response => response.json())
      .then(data=>setOutput(data))
      .then(()=>{output==null ? isEffectUsed=false : isEffectUsed=true});

  }, [someSettings]);

  return {output: output, isEffectUsed: isEffectUsed};
}

我正在了解该isEffectUsed效果false是否已被使用。我错过了什么？谢谢。

标签： javascriptreactjs

Answer 1

首先，最后一个.then()似乎无效，因为.then(data=>setOutput(data))没有完全返回承诺。

因此，为了能够链接最后一个，.then()您应该像这样Promise.resolve从上一个返回 a.then()

.then((data) => Promise.resolve(setOutput(data)))

接下来，考虑设置isEffectUsed为refwithuseRef而不是普通变量，这样您就可以跨多个状态管理不同的值

export const useApi= (ApiUrl, someSettings) => {

const [output, setOutput] = useState(null);
const isEffectUsed = useRef(false);

useEffect(() => {
  fetch(ApiUrl, {
    method: 'post',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(someSettings),
  })
    .then((response) => response.json())
    .then((data) => Promise.resolve(setOutput(data)))
    .then(() => {
      // This basically resets isEffectUsed only if output is set
      output && isEffectUsed.current=true;
    });
}, [someSettings]);
 

  return {output: output, isEffectUsed: isEffectUsed.current };
}