Question

因此，在我的食谱应用程序中，用户可以将食谱标记或取消标记为自己的收藏夹。我唯一不能缠住头的事情是如何使其即时。我当前的代码支持人员发了一个帖子，将配方标记为“我的最爱”，但是您看到图标的更改（即已填充的图标），必须刷新页面。我确实需要一些有关如何使它在点击时起作用的建议。

这是我的代码：

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是一个函数，如果配方ID与用户首选项对象中存储的配方ID相匹配，则返回true或false。

Answer 1

现在，您从返回true或false的函数中计算出“此食谱是最喜欢的”。

ReactJS无法自动触发收藏图标的重新渲染，因为它根本没有链接到配方的状态。

如果您将“ isFavorite”置于配方状态，并通过onClick事件将其切换为true或false，这将更改“ isFavorite”的配方状态值，React应该会知道在配方卡的配方上调用重新渲染图标...，那么您只需确保在true时输出填充图标的HTML，在false时输出空白图标的HTML。在这种情况下，React将知道重新呈现与状态的“切片”（isFavorite配方）链接的所有DOM元素。

TL; DR：如果用户通过不修改状态的功能来偏爱配方，则使用React的状态概念而不是计算配方，因为当状态更改时，React会重新渲染。

React事件处理：在Instant in中标记为收藏项

1 个答案: