时间戳

首页 > 解决方案 > useEffect 中的 useState 不更新状态

async-await - useEffect 中的 useState 不更新状态

问题描述

状态“状态”不会更改值，并且始终保持其初始值“待处理”并且不会将值更改为“暂停”，知道我确定请求返回结果

const [_talentID, setTalentID] = useState(props.match.params.idTalent);
const [_jobID, setJobID] = useState(props.match.params.idJob);
const [status, setStatus] = useState('pending');

  useEffect(() => {
    async function getStatus() {
      await axios
        .get('api')
        .then(res => setStatus('on hold'))
    }
    getStatus();
    
  }, []);

  useEffect(() => {
    console.log(status);
  }, [status]);

标签： async-awaitreact-hooks

解决方案

我的猜测是你在你的组件中做其他干扰。你能展示整个组件吗？

另外，这行得通吗？（基本上只是一些重构，并使用这个小钩子。

function usePromiseMemo(callback, deps) {
  // Private states
  const [state, setState] = useState();
  const isMounted = useRef(true);

  // Register unmount
  useEffect(() => {
    if (!isMounted.current) isMounted.current = true;
    return () => {
      isMounted.current = false;
    };
  }, []);

  // Execute callback
  useEffect(() => {
    if (isMounted.current) {
      if (state !== undefined) setState(undefined);
      Promise.resolve()
        .then(() => callback())
        .then(r => {
          if (isMounted.current) setState(r);
        });
    }
  }, deps || []);

  // Return state
  return state;
}

// YOUR COMPONENT HERE
function MyComponent(props: any) {
  const [status, setStatus] = useState('pending');

  // Result of axios.get("api")
  const response = usePromiseMemo(
    () =>
      axios.get('api').then(res => {
        setStatus('on hold');
        return res;
      }),
    [setStatus]
  );

  useEffect(() => {
    console.log(status);
  }, [status]);

  return <div></div>;
}

推荐阅读