Question

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

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

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

此操作完成后，我要：

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

当前行为

仅当我离开当前页面并返回到页面时，按钮颜色才会更新
在操作中，我可以记录返回的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（拥有多个dispatch是很正常且合法的），而不会再次触发useEffect(() => { setLikeButtonColor(); }, [usersLikedCars]);不会进入无限状态

dict.setdefault()

反应挂钩-调度动作后未调用useEffect

1 个答案: