反应挂钩 - useEffect 在分派动作后未调用

Question

我有一个按钮可以like/dislike一辆车

状态存储usersLikedCars是一个数组。

当用户单击 like/dislike 按钮（同一个按钮）时，将进行 API 调用，它是 POST 或 DELETE 更新数据库和 returns多 1 行或少 1 行 usersLikedCars.

这个操作完成后，我想：

遍历更新后的 usersLikedCars 数组
检查汽车是否已经liked/disliked
将按钮颜色更新为红色=喜欢，蓝色=不喜欢

当前行为

按钮颜色仅在我离开当前页面并返回时更新
在操作中，我可以记录返回的 API 数据，它会正确更新

预期行为

我希望 usersLikedCars 在组件中更新（这是计数）并通过检查新添加的汽车是否是更新数组的一部分来调用基本上更新按钮颜色的函数。

查看 this link 中的答案，我添加了 useEffect ，其中我发送了获取更新 usersLikedCars 的操作 - 至少我认为是这样。它仅在页面首次呈现时调用。

此外，useEffect 迫使我将 isCarLiked 和 setLikeButtonColor 包装在 useCallback 中，我不是 100% 确定是正确的..

有人能给我指出正确的方向吗？

const CarScreen = ({ route }) => {
  // props
  const { params } = route;
  const { car } = params;
  // member variables
  const carTitle = `#${car.title}`;
  const carLikeCount = car.hit_count ? car.hit_count : 0;
  const carBirthday = moment(car.created_at).format('MMMM Do YYYY');
  const carLikeButtonColor = useRef('');
  // redux
  const dispatch = useDispatch();
  const user = useSelector((state) => state.user.user);
  const usersLikedCars = useSelector(
    (state) => state.usersLikedCars.items,
  );

  /**
   * Call this function when car is liked/unliked
   * and when like button color needs to be updated
   */
  useEffect(() => {
    dispatch(fetchUsersLikedCars());

    // set the like button's color: red - LIKED, blue - NOT LIKED
    setLikeButtonColor();
  }, [dispatch, setLikeButtonColor]);

  /**
   * Method for liking a car
   */
  const handleLikeOrUnlikeCar = async () => {
    // check if user already liked this car
    const carAlreadyLikedByUser = isCarLiked();

    if (carAlreadyLikedByUser) {
      // find the car in user's liked car state array to "unlike"
      const carToDelete = usersLikedCars.find(
        (usersLikedCar) => usersLikedCar.title === car.title,
      );
      // unlike it
      try {
        await console.log(
          'BEFORE remove usersLikedCars',
          usersLikedCars,
        );

        await remove({
          uid: carToDelete.uid,
        });
        await dispatch(fetchUsersLikedCars());
        await console.log(
          'AFTER remove usersLikedCars',
          usersLikedCars,
        );
      } catch (error) {
        console.error(error);
      }
    } else {
      // like it

      try {
        await console.log('BEFORE add usersLikedCars', usersLikedCars);
        await add({
          title: car.title,
          user_uid: user.uid,
          car_uid: car.uid,
        });
        await dispatch(fetchUsersLikedCars());
        await console.log('AFTER add usersLikedCars', usersLikedCars);
      } catch (error) {
        console.error(error);
      }
    }
  };

  const isCarLiked = useCallback(
    () =>
      usersLikedCars.some(
        (usersLikedCar) => usersLikedCar.title === car.title,
      ),
    [usersLikedCars, car.title],
  );

  /**
   * Set color of car like button
   */
  const setLikeButtonColor = useCallback(() => {
    // look through user's liked cars and see if the current one is in there already
    const carAlreadyLikedByUser = isCarLiked();

    // if user liked this car already, color = RED else BLUE
    carLikeButtonColor.current = carAlreadyLikedByUser
      ? Colors.loveRed
      : Colors.defaultColor;
  }, [isCarLiked]);

....
}

动作

export const fetchUsersLikedCars = () => async (dispatch) => {
  const usersLikedCars = await find();

  console.log('ACTION usersLikedCars', usersLikedCars); // value is correctly updated here
  return dispatch({
    type: FETCH_USERS_LIKED_CARS,
    payload: usersLikedCars,
  });
};

Answer 1

您需要将 usersLikedCars 放在 useEffect 的依赖项中，这样每当它发生变化时，useEffect 就会被触发。

为了实现这一点，除了您已有的 useEffect（拥有多个 useEffects 是非常正常和合法的），这不会触发 dispatch再次这样它就不会进入无限状态

 useEffect(() => {
    setLikeButtonColor();
  }, [usersLikedCars]);

反应挂钩 - useEffect 在分派动作后未调用

react hooks - useEffect not called after action is dispatched

reactjs

react-native

redux

react-hooks

use-effect