useEffect依赖项不更新useEffect

Question

我有一个useEffect挂钩，它在更改依赖项后不进行更新。依赖项是通过道具传递的状态变量。下面是代码的内容：

const MyComponent = ({resource}) => {

// runs after changing resource state
console.log(resource)

useEffect(() => {
    setLoading(true);
      // doesnt run after changing resource state
      console.log(resource)
      setVariable(setDefaultValue());
    
  }, [resource]);

}

MyComponent是针对两种状态之一“option1”或“option2”呈现的，组件根据状态呈现不同的状态。我这样称呼这个组件：

const [resource, setResource] = useState('option1');
const handleChange = (e) => {
    setResource(e.target.value);
};

return (
    <MyComponent resource={resource} />
)

我不明白为什么在更改资源状态之后useEffect不运行。位于console.log外部的useEffect显示更改状态，但useffect中的console.log不会在更改状态之后运行。

Answer 1

哦，您可以更改上面的代码，请尝试：

​

//Parent Component
const [resource, setResource] = useState('option1');
const [variable,setVariable] = useState();
const [loading,setLoading] = useState(false);
useEffech(()=>{
  let fetch_api = true;
  setLoading(true);
  fetch(URL,options).then(res=>res.json())
    .then(res=>{
       if(fetch_api){
          setVariable(setDefaultValue());
          setLoading(false);
       }
    });
    return ()=>{
        //remove memory
        fetch_api = false;
    }
},[resource]);
const handleChange = (e) => {
    setResource(e.target.value);
};

return (
    <MyComponent variable={variable} />
)


//Child Component
const MyComponent=({variable})=>{
  
  return <>
    
  </>
}

​