反应钩子 - 调度操作后未调用useEffect

Question

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

状态存储usersLikedCars，这是一个数组。

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

这个操作完成后，我想：

1. 循环通过更新的usersLikedCars 数组
2. 检查汽车是否被喜欢/不喜欢
3. 将按钮颜色更新为 red=liked, blue=notLiked

当前行为

• 按钮颜色仅在我离开当前页面并返回时才会更新
• 在操作内部，我可以记录返回的 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

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

要实现这一点，您可以在已有的useEffect 之外再拥有一个useEffects（拥有多个useEffects 是很正常且合法的），这不会再次触发dispatch，因此它不会进入无限状态

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