React UserContext：useEffect 中的条件被忽略

IT技术 reactjs react-hooks use-context
2021-05-21 17:15:34

我正在使用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 时，我想做出react（ha！）做一些事情。

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

 const [
    isLengthOfUserMarkersLessThanTwo,
    setIsLengthOfUserMarkersLessThanTwo
  ] = useState(true);

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

现在，尽管 Array 的长度变为 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>
  );

先感谢您！

2个回答

将函数作为状态传递可能不是你想要的，同样传递函数来更新react状态的切片，由一个伟大的阶段管理器（例如 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 的一篇很棒的文章！

我基于它添加了这段代码。

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

刚刚添加了这个减速器：

  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>
  );

再次感谢阿米尔侯赛因！

其它你可能感兴趣的问题
上一篇Typescript React：如何覆盖默认的 html 输入元素属性props类型 下一篇“错误：自签名证书”与 node+express 应用程序