1

精简版：

我在 ContextProvider 中有一个 useEffect，我从服务器获取一些数据。在我的组件中，我使用这个 Context 并希望用“传入”数据初始化另一个 useState()-hook。[value, setValue] = useState(dataFromContext) 中的值未使用 dataFromContext 设置/初始化。为什么，哦，为什么？

很长的版本：

我试图遵循（并扩展）这个如何在反应中使用 context/useContext-hook 的例子

所以，我有一个 AppContext 和一个 ContextProvider，我用 index.js 包装了我的，例子中的一切都很好。

现在我想在我的 ContextProvider 中的 useEffect 中加载数据，所以我的上下文提供程序现在看起来像这样

const AppContextProvider = ({ children }) => {
  const profileInfoUrl = BASE_URL + `users/GetCurrentUsersProfileInfo/`
  const {loading, getTokenSilently} = useAuth0();  

  const [profileInfo, setProfileInfo] = useState( {})


  useEffect(() => {          
    if (!loading && profileInfo.user.username  === '' ) {                 
        Communication.get(profileInfoUrl, getTokenSilently, setProfileInfo); 
    }
 },[loading, getTokenSilently])
 
  
  const context = {
    profileInfo,
    setProfileInfo
  };
  return (
    <AppContext.Provider value={ context }> 
      {children}
    </AppContext.Provider>
  );
}

现在，在我的组件中，我想显示这些数据。其中之一是用户选择的类别，一个 id 和 isSelected 的列表，它应该提供一个复选框列表。

const TsProfileSettingsPage = ( ) => {
  //..  
  const { profileInfo, setProfileInfo } = useContext(AppContext);  
  const userCategories = Object.assign({}, ...profileInfo.userDetails.categories.map((c) => ({[c.id]: c})));
  const [checkedCategories, setCheckedCategories] = useState(userCategories);
 
  console.log("profileInfo.userDetails.categories : " + JSON.stringify(profileInfo.userDetails.categories));   
  console.log("userCategories : " + JSON.stringify(userCategories));//correct dictionary
  console.log("checkedCategories : " + JSON.stringify(checkedCategories)); //empty object!
 //...rest of code

所以我加载用户选择并将其转换为以“userCategories”结尾的字典。我使用那个“userCategories”来初始化checkedCategories。但是，从下面的console.logs，userCategories 设置正确，但checkedCategories 没有，它变成一个空对象！

所以我的问题是。我在这里想错了吗？（显然我是），我只想拥有一个外部状态。一切正常，但是当我使用它在我的组件中初始化 useState() 时，它没有被设置。我已经测试过在我的组件中有另一个 useEffect() ，但我只是觉得我在做一些更基本的错误。

谢谢你的帮助

4

0 回答 0