React Event Handling: пометить как любимый предмет на Instant в - PullRequest
Новая
       34

React Event Handling: пометить как любимый предмет на Instant в

0 голосов
/ 23 мая 2019

enter image description here

Таким образом, в моем приложении для рецептов пользователи могут отмечать или снимать пометки с рецептов как своих любимых. Единственное, что я не могу обернуть вокруг себя, это как сделать это мгновенно. мой текущий код поддерживает, делает пост-вызов, чтобы пометить рецепт как любимый, но вы видите изменение значка (то есть заполненного), они должны обновить страницу. Мне нужно некоторое предложение о том, как я могу заставить его работать на клике.

Вот мой код: 

class CuisineViewById extends Component {
    constructor(props) {
        super(props);
        this.state = {
            user: {},
            access_token: '',
        };
        this.toggleFavorite = this.toggleFavorite.bind(this);
    }

    componentDidMount() {
        this.props.getUser(() => {
            this.props.getAccessToken(this.props.user.profile.sub, () => {
                console.log(this.props.user);
                this.props.getCuisineById(this.props.match.params.id, this.props.accessToken);
                this.props.getFavoriteRecipes(this.props.accessToken);
            });
        });
    }

    toggleFavorite(userID, recipeID, marked) {
        const userpreference = {
            userid: userID,
            recipe: recipeID,
            favorite: marked
        };

        axios
            .post('/api/userpreference', userpreference, {
                headers: {'access_token': this.props.access_token}
            })
            .then(res => console.log(res));
    }

    displayFavorite = recipeId => {
        let favoriteRecipes = this.props.userPreferred;
        for (var i = 0; i < favoriteRecipes.length; i++) {
            if (favoriteRecipes[i].recipe === recipeId) {
                return true;
            } else {
            }
        }
    };

  render() {
       const that = this; 
       const {user} = this.props; 
       const {cuisine} = this.props; 

       return (
             <CuisineTileHeading
                 label={cuisine.label}
                 totalNoRecipes={cuisine.totalRecipes]}
                 key={cuisine.id}
             >
            {cuisine.recipes && cuisine.recipes.map(function(asset, index) 
                  {
                   let marked = recipe.isFavorite ? 'no' : 'yes';
                     return (
                        <RecipesCards
                           title={recipe.title}
                           description={recipe.description}
                           chef={recipe.owner}
                           lastUpdated={recipe.lastUpdated}
                           recipeType={recipe.assetType}
                           key={'RecipesCard' + index}
                           thumbnail={recipe.thumbnailBase64}
                           recipeId={recipe.id}
                           cuisine={cuisine}
                           favorite={that.displayFavorite(recipe.id)}
                           toggleFavorite={() =>
                                                        that.toggleFavorite(userId, recipe.id, marked)
                           }
                           />
                           );
            })}
      </CuisneTileHeading>
    )

  } 
}

const mapStateToProps = state = ({   
  cuisine : state.cuisine.cuisne, 
  user: state.user.user, 
  userPreferred: state.recipe.userPrefered, 
  accessToken: state.asset.accessToken

)}

В моем компоненте монтируется, я вызываю функции для получения информации о пользователе, затем получаю доступ к токену, затем к кухням, а затем к любимым рецептам пользователя.

toggleFavorite - это функция, которая делает рецепт любимым или не любимым.

displayFavorite - это функция, которая возвращает true или false, если идентификатор рецепта соответствует хранилищу идентификаторов рецептов в объекте userpreference.

1 Ответ

0 голосов
/ 24 мая 2019

Прямо сейчас вы вычисляете, что «этот рецепт является любимым» из функции, которая возвращает истину или ложь.

ReactJS не может автоматически инициировать повторный рендеринг избранного значка, поскольку он не связанвообще к состоянию рецепта.

Если вы поместите «isFavorite» в состояние рецепта и переключите его на true или false с событием onClick, которое изменит значение состояния рецепта на «isFavorite», React должен знатьчтобы вызвать повторную визуализацию на значке карты рецепта ... тогда вы просто убедитесь, что он выводит HTML-код для заполненного значка, когда значение true, и пустой значок, когда значение false.React будет знать, что нужно перерисовать все элементы DOM, связанные с этим «кусочком» состояния, в данном случае «isFavorite recipe».

TL; DR: использовать концепцию состояния React вместо вычислений, если этот рецепт предпочтителенпользователем через функцию, которая не изменяет состояние, поскольку повторные рендеринг выполняется React при изменении состояния.

...