React UserContext：useEffect 中的条件被忽略

问题描述

我正在使用 useContext 钩子制作一个与其他组件共享状态的组件。

现在这个组件也将状态保存到本地存储。

var initialState = {
  avatar: '/static/uploads/profile-avatars/placeholder.jpg',isRoutingVisible: false,removeRoutingMachine: false,markers: [],currentMap: {}
};

var UserContext = React.createContext();

function setLocalStorage(key,value) {
  function isJson(item) {
    item = typeof item !== 'string' ? JSON.stringify(item) : item;

    try {
      item = JSON.parse(item);
    } catch (e) {
      return false;
    }

    if (typeof item === 'object' && item !== null) {
      return true;
    }

    return false;
  }

  try {
    window.localStorage.setItem(key,JSON.stringify(value));
  } catch (errors) {
    // catch possible errors:
    console.log(errors);
  }
}

function getLocalStorage(key,initialValue) {
  try {
    const value = window.localStorage.getItem(key);
    return value ? JSON.parse(value) : initialValue;
  } catch (e) {
    return initialValue;
  }
}

function UserProvider({ children }) {
  const [user,setUser] = useState(() => getLocalStorage('user',initialState));

在我声明一些 useEffect 钩子之后：

const [
    isLengthOfUserMarkersLessthanTwo,setIsLengthOfUserMarkersLessthanTwo
  ] = useState(true);

  useEffect(() => {
    setLocalStorage('user',user);
  },[user]);

  useEffect(() => {
    console.log('user.isRoutingVisibile ',user.isRoutingVisibile);
  },[user.isRoutingVisibile]);

  useEffect(() => {
    console.log('user.markers.length ',user.markers.length);
    if (user.markers.length === 2) {
      setIsLengthOfUserMarkersLessthanTwo(false);
    }

    return () => {};
  },[JSON.stringify(user.markers)]

);

最后一个钩子是头刮板，我在依赖项中传递一个数组，当数组长度达到 2 时，我想做出反应（哈！）做一些事情。

当它到达那里时，我有一个 useState 钩子，它会改变一个变量的值。

 const [
    isLengthOfUserMarkersLessthanTwo,setIsLengthOfUserMarkersLessthanTwo
  ] = useState(true);

我有一个函数，我想将它传递给另一个组件，该函数只能在三元返回 true 时触发。

现在尽管数组的长度变为 2，但 setIsLengthOfUserMarkersLessthanTwo 不会将变量更改为 false

return (
    <UserContext.Provider
      value={{
     
        setUserMarkers: marker => {
          console.log('marker ',marker);

          console.log(
            'isLengthOfUserMarkersLessthanTwo ',isLengthOfUserMarkersLessthanTwo
          );
          isLengthOfUserMarkersLessthanTwo === true
            ? setUser(user => ({
                ...user,markers: [...user.markers,marker]
              }))
            : () => null;
        },}}
    >
      {children}
    </UserContext.Provider>
  );

先谢谢你！

解决方法

将函数作为状态传递可能不是你想要的，同样传递函数来更新反应状态的切片，由一个伟大的阶段管理器（如redux）简单地解决了。对于简单的项目，redux 可能有点矫枉过正，react 本身可以通过 Context 在幕后处理这些场景。使用 react Hooks 也将变得更具可读性。这里有一个简单的演示，展示了如何使用 React 钩子使其更具可预测性。

const UserStateContext = React.createContext()
const UserDispatchContext = React.createContext()

function userReducer(state,{type,payload}){
  switch (type) {
    case 'setId': {
      return {...state,id: payload.id}
    }
    case 'setAvatar': {
      return {...state,avatar: payload.avatar}
    }
    // ...
    default: {
      throw new Error(`Unhandled action type: ${type}`)
    }
  }
}

const initialState = {
  avatar: '/static/uploads/profile-avatars/placeholder.jpg',isRoutingVisible: false,// ...
};


function UserProvider({children}) {
  const [state,dispatch] = React.useReducer(userReducer,initialState)
  return (
    <UserStateContext.Provider value={state}>
      <UserDispatchContext.Provider value={dispatch}>
        {children}
      </UserDispatchContext.Provider>
    </UserStateContext.Provider>
  )
}

function useUserState() {
  return React.useContext(UserStateContext)
}

function useUserDispatch() {
  return React.useContext(CountDispatchContext)
}

function useUser() {
  return [useUserState(),useUserDispatch()]
}

现在您可以在子组件中使用它，如下所示：

const AvatarChildren = () => {
  const [user,dispatch] = useUser()

  return (
    <div>
      <img src={user.avatar} />
      <button 
        onClick={() => dispatch({ type: 'setAvatar',payload: {avatar: 'newAvatarSrc'} })}
      >
       Change Avatar
      </button>
    </div>
  )
}

你甚至可以让它更简单，比如

const userReducer = (state,action) => ({state,...action})

并像这样使用它

onClick={() => dispatch({avatar: 'newAvatarSrc'})}

感谢阿米尔侯赛因·易卜拉希米！他指给我看 Kent C. Dodds 的 great article！

我在此基础上添加了此代码。

我刚刚添加了减速器，但确实应该查看这篇文章，因为他为上下文添加了一些错误检查（我应该做的事情）。

刚刚添加了这个减速器：

  function reducer(state,action) {
    switch (action.type) {
      case 'isLengthOfMarkersLessThanTwoFalse': {
        return {
          isLengthOfMarkersLessThanTwo: (state.isLengthOfMarkersLessThanTwo = false)
        };
      }
      default: {
        throw new Error(`Unhandled action type: ${action.type}`);
      }
    }
  }

const [state,dispatch] = useReducer(reducer,{ isLengthOfMarkersLessThanTwo: true });

然后在我的 useEffect 钩子中：

    useEffect(() => {
    if (user.markers.length === 2) {
      dispatch({ type: 'isLengthOfMarkersLessThanTwoFalse' });
    }
  },[JSON.stringify(user.markers)]);

然后在 Provider 中返回它，以便它的孩子可以使用它：

return (
    <UserContext.Provider
      value={{
        setUserMarkers: marker => {

          state.isLengthOfMarkersLessThanTwo // using the var to control the ternary depending on useEffect!

            ? setUser(user => ({
                ...user,markers: [...user.markers,marker]
              }))
            : () => null;
        }}
    >
      {children}
    </UserContext.Provider>
  );

再次感谢阿米尔侯赛因！

react-hooks reactjs reactjs reactjs reactjs use-context