值未传递给 addStoreId

Question

尽管通过retrieveStoreId方法检索了预期值（通过记录函数调用结果进行检查），但通过上下文方法addStoreId更新storeId状态失败（即始终返回null）。这是一个 React Native 项目。以下是我的上下文文件和使用 useEffect 的状态更新代码：

//Context file: 

import { createContext, useState } from "react";

const StoreStatusContext = createContext({
  storeId: null,
  addStoreId: (storeId) => {},
  removeStoreId: () => {},
});

export function StoreStatusContextProvider({ children }) {
  const [storeId, setStoreId] = useState(null);

  const storeStatusContext = {
    storeId: storeId,
    addStoreId: (storeId) => setStoreId(storeId),
    removeStoreId: () => setStoreId(null),
  };

  return (
    <StoreStatusContext.Provider value={storeStatusContext}>
      {children}
    </StoreStatusContext.Provider>
  );
}

export default StoreStatusContext;


//State update using addStoreId: 

  const { storeId, addStoreId } = useContext(StoreStatusContext);

useEffect(() => {
    async function checkStoreStatus() {
      const isStoreIdAvailable = await retrieveStoreId();
      // console.log(isStoreIdAvailable);
      addStoreId(isStoreIdAvailable);
    }
    checkStoreStatus();
  }, []);

tl;dr：isStoreIdAvailable 的值需要传递给 addStoreId 才能更新 storeId 状态。

Answer 1

您的代码中最有可能需要修复一些问题

1. addStoreId

   只是一个

   setStoreId

   。使用 setStoreId 而不使用额外的包装方法
2. 将

   removeStoreId

   包裹到

   useCallback

中
3. 使用

   useMemo

   表单上下文值
4. 将

   addStoreId

   作为钩子参数传递给

   useEffect

//Context file: 

import { createContext, useState, useMemo } from "react";

const StoreStatusContext = createContext({
  storeId: null,
  addStoreId: (storeId) => {},
  removeStoreId: () => {},
});

export function StoreStatusContextProvider({ children }) {
  const [storeId, setStoreId] = useState(null);
  const removeStoreId = useCallback(() => removeStoreId(null), []);

  const storeStatusContext = useMemo(() => ({
    storeId,
    addStoreId: setStoreId,
    removeStoreId,
  }, [storeId]);

  return (
    <StoreStatusContext.Provider value={storeStatusContext}>
      {children}
    </StoreStatusContext.Provider>
  );
}

export default StoreStatusContext;


//State update using addStoreId: 

  const { storeId, addStoreId } = useContext(StoreStatusContext);

useEffect(() => {
    async function checkStoreStatus() {
      const isStoreIdAvailable = await retrieveStoreId();
      // console.log(isStoreIdAvailable);
      addStoreId(isStoreIdAvailable);
    }
    checkStoreStatus();
  }, [addStoreId]);