Блог

Главная - Вопросы по программированию - Мутировать, а затем повторно отображать компонент

Мутировать, а затем повторно отображать компонент

#javascript #reactjs

#javascript #reactjs

Вопрос:

У меня есть компонент с обработчиком событий для значка «нравится». Я хочу иметь возможность щелкнуть значок «Нравится», обновить базу данных, чтобы записать, что пользователю понравился этот элемент, а затем повторно отобразить компонент, чтобы изменить значок, чтобы отразить, что пользователю понравился элемент. Это не работает. Кажется, что повторное изменение происходит до мутации, поэтому я не могу уловить изменения. Вот код:

 handleFavourite = () => {
    const {
      post, 
      client: apolloClient,
      currUser,
      registerPromise
    } = this.props;
    var resu<
    const postId = post._id;
    if (currUser.library.includes(post._id)) {
      console.log("changed to not liked")        
      result = removeFromLibrary({postId: postId}  , apolloClient);
    }else {
      console.log("changed to yes, liked!")
      result = addToLibrary( {postId: postId} , apolloClient);
    };
    this.setState(state => ({ liked: !currUser.library.includes(post._id) }));

    return resu<

Вот код в рендеринге для установки значка в соответствующее состояние:

 <CardActions className={classes.actions} disableActionSpacing>
  <IconButton
    className={classnames(classes.unliked, {
      [classes.liked]: currUser.library.includes(post._id),
    })}
    aria-label="Add to favorites"
    onClick={this.handleFavourite}
  >
    <FavoriteIcon />

Комментарии:

1. Разве ваш removeFromLibrary и addToLibrar асинхронный?

2. @обратный вызов да, они асинхронны. Я сейчас изучаю это, видя, что это повлияет на порядок вещей. Я все еще в замешательстве.

3. Ответ Сюань-Хун Чинь должен решить вашу проблему! Кроме того, вам, вероятно, не нужно возвращать результат, так как впоследствии он нигде не используется

Ответ №1:

Предположим, что ваши removeFromLibrary и addToLibrary являются асинхронными функциями, вы можете просто дождаться завершения

 handleFavourite = async () => {
    const {
      post, 
      client: apolloClient,
      currUser,
      registerPromise
    } = this.props;
    var resu<
    const postId = post._id;
    if (currUser.library.includes(post._id)) {
      console.log("changed to not liked")        
      result = await removeFromLibrary({postId: postId}  , apolloClient);
    }else {
      console.log("changed to yes, liked!")
      result = await addToLibrary( {postId: postId} , apolloClient);
    };
    this.setState(state => ({ liked: !currUser.library.includes(post._id) }));

    return resu<