为什么 useState 变量在异步函数的 try catch 语句中未定义？

Question

我创建了一个钩子，通过 fetch to api 来管理单个对象的状态。该钩子公开了与该对象交互的函数。

// the hook
const useMyHook = () => {
    const [myObject, setMyObject] = useState(null);
    
    useEffect(() => {
      const fetchData = async () => {
        const data = await fetchSomething();
        setMyObject(data);
      }
      fetchData();
    }, []);

    const updateMyObject = async () => {
        console.log(myObject);                // log : { ... }
        try {
            console.log(myObject);            // log : undefined
            // ...
        } catch(err) {
            // ...
        }
    };

    return {
        updateMyObject,
        myObject
    };
};

然后我在组件内使用这个钩子并用按钮触发 updateMyObject() 。

// the component
const MyComponent = () => {
    const { myObject, updateMyObject } = useMyHook();

    return (
        <button onClick={updateMyObject}>
            Click me
        </button>
    );
};

在 try catch 块之前日志是干净的并且在块内我得到 undefined ，这怎么可能？

Answer 1

我认为这会起作用

 useEffect(() => {
      const fetchData = async () => {
        const data = await fetchSomething();
        setMyObject(data);
      }
If(!myObject)
      fetchData();
    }, [myObject]);

Answer 2

你的代码完全没问题！ fetchSomething() 方法可能存在问题。理想情况下，它应该返回数据，但它并没有做同样的工作。

这是一个小例子。你可以尝试一下。

 const fetchSomething = async () => {
        const response = await fetch(
          "https://jsonplaceholder.typicode.com/posts/1"
        ).then((res) => res.json());
        return response;
      };