reactjs 将值从 useSelector 传递给 useEffect

Question

我正在构建一个 reactjs 应用程序

我想从 redux 状态获取我的用户 ID

使用 useSelector 并将其传递给 useEffect

我的代码

UserReducer

export function userReducer(state = { token: "", user: {} }, action) {
  switch (action.type) {
    case "LOGIN":
      return action.payload;
    case "LOGOUT":
      return action.payload;
    default:
      return state;
  }
}

ViewTransaction.jsx

const ViewTransaction = () => {
  const user_id = useSelector((state) => state.user.user.id);
  const params = useParams();

   useEffect(() => {
      setLoading(true);
      PendingServices.getPendingTransaction(
        `localhost:8000/user/transaction/pending/get-transaction/${params.id}?user_id=${user_id}`
      )
        .then((response) => {})
        .catch((error) => {})
        .finally(() => {
          setLoading(false);
        });
    }, []);
   return (
        <div>transaction</div>
   )
}

export default ViewTransaction;

user_id 显示未定义。

Answer 1

你需要在 useEffect 依赖数组中传递 user_id 并检查它是否已定义或点头......因为首先呈现它未定义，因为 redux 尚未提供它

  useEffect(() => {
   if(user_id){
      setLoading(true);
      PendingServices.getPendingTransaction(
        `localhost:8000/user/transaction/pending/get-transaction/${params.id}?user_id=${user_id}`
      )
        .then((response) => {})
        .catch((error) => {})
        .finally(() => {
          setLoading(false);
        });
   }
    }, [user_id]);

Answer 2

就像德鲁在上面的评论中写的那样，你的依赖数组缺少变量。 React 试图聪明地避免白白调用钩子，并且通过不传递任何依赖项，你让它假设对 useEffect 中方法的调用将始终相同，并且它可以缓存和重用调用结果。由于 user_id 一开始是未定义的，当没有人登录时， useEffect 与未定义用户的结果被缓存。

通过在 dep 数组中添加 user_id 和 params.id 你告诉 React “每次这些变量改变时，方法的结果也应该改变”，所以它会使缓存 useEffect 结果和运行方法。

我建议使用这个 eslint 插件来自动帮助捕捉这些情况：https://www.npmjs.com/package/eslint-plugin-react-hooks

reactjs 将值从 useSelector 传递给 useEffect

reactjs passing value to useEffect from useSelector

javascript

reactjs

redux

axios