两个（或更多）自定义挂钩发送休息请求（post、put、get），对结果执行某些操作，我希望它们按顺序工作

Question

我有一个 React 应用程序，我需要：

1. 设置初始状态
2. 如果初始对象不存在，则创建一个对象
3. 更新创建的对象
4. 获取更新后的对象

我想用自定义挂钩和本地状态来做到这一点。目前我不想使用 Redux 或其他以状态为中心的解决方案

我有点困惑，因为我已经有一段时间没有使用 React 了，我有点忘记了这个概念......我想将代码从一个 useEffect 中的一大段代码中分离出来，并使用一个自定义的钩子每一项休息请求加上一些与此相关的逻辑。

这不是我真正的代码，但它非常接近它。 这是我的主要组成部分。

function MyApp() {
  const [myState, setMyState] = useState(myInitialObject);

  // hook where I create a new object via post request
  const { newObject } = useCreateMyNewObject(myState);

  // hook where I update the created object via put request, I dont need the result
  useUpdateMyNewObject(newObject);

  // hook where I call get method
  const updatedObject = useFetch(newObject);

  return (
    <>      
       { use properties of updatedObject }
    </>
  );
}

它调用 post 方法两次，put - 1 和 get - 从不。 我们使用严格模式，我猜这就是为什么 post 方法被调用两次的原因，但我不知道为什么 get (useFetch hook) 不起作用。

这不是 useFetch 挂钩的真实代码：

const useFetch = (myInitialObject) => {
  const [myState, setMyState] = useState(myInitialObject);

  useEffect(() => {
    if (!myState?.id) {
      return;
    }

    async function fetchFromServer(id) {
       const fetchedObject = await fetchObject(id);
       setMyState(fetchedObject );
    }

    fetchFromServer(myState.id)

  }, [myState]);

  return myState;
};

我的问题是我做错了什么？

Answer 1

useFetch

无法等到 PUT 完成。可能发生什么：

• POST 创建对象
• newObject 可能从 null 开始，然后由于 POST 而变成某种东西

• useUpdateMyNewObject

  和

  useFetch

  基本上同时启动，初始值为空值，并且不执行任何操作，然后可能再次使用更新后的值。看起来

  useFetch

  一定是短路的，表明

  newObject

  没有按照您的预期进行更新。

至少，我认为您需要在调用 useFetch 之前等待 PUT。检查（打印到控制台或在调试器中观察）各个调用之间的

newObject

值可能会有所帮助。