react hooks-调度动作后未调用useEffect

Question

我有一个可以喜欢/不喜欢汽车的按钮。

状态存储为数组的usersLikedCars。

[当用户单击like/dislike按钮（相同按钮）时，将进行POST或DELETE的API调用，该API会更新db并返回usersLikedCars的1行或少1行。

此操作完成后，我要：

1. 循环浏览更新的usersLikedCars数组
2. 检查汽车是否被喜欢/不喜欢
3. 将按钮颜色更新为红色=喜欢，蓝色=不喜欢

当前行为

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

预期行为

• 我希望usersLikedCars在组件中进行更新（即计数），并通过检查新添加的汽车是否属于已更新的数组来调用基本上更新按钮颜色的函数。

[在this链接中查看答案，我添加了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

为了完成，您可以拥有另一个useEffect，它不会再次触发dispatch，因此它不会进入无限状态

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