0

我正在构建一种电子商务应用程序。众所周知，每个电子商务应用程序都有愿望清单功能。在我的产品列表中，卡片项目上有一个点赞按钮。当用户单击它时，它会调用 API 将isLiked属性设置为true（布尔值）并更新数据库。

当用户单击该卡片项目时，它应该将他导航到它的详细信息页面，该页面也有类似按钮。我在...中调用详细 API 是componentDidMount这样的：

如果from detail APIred的属性是 ，我应该用颜色渲染 like 按钮。因此，为此，我在构造函数中使用 props 值设置我的状态：isLikedtrue

constructor(props) {
    super(props);
    this.state = {
      isLikedForCompare: this.props.detailProduct.is_liked, // true
      isLiked: this.props.detailProduct.is_liked, // true
      selectedItem: ''
    };
  }

我添加isLikedForCompare比较是因为我们无法this在 getDerivedStateFromProps 中访问。

  static getDerivedStateFromProps(nextProps, prevState) {
    let defaultItem = ''
    // some code to get default item

    const { is_liked: isLiked } = nextProps.detailProduct;
    let selected = {};

    if (prevState.selectedItem === '') {
      selected = {
        selectedItem: defaultItem,
      };
    }

    return {
      ...selected,
      isLiked: prevState.isLikedForCompare !== isLiked ? isLiked : prevState.isLikedForCompare
    };
  }

我有那个selectedItem总是满足条件的代码块，因为初始值总是空的。这段代码适用于其他功能，所以我需要让他们不管，这就是为什么我的代码是这样的。所以，继续……现在我可以isLiked从道具中获得价值。在我看来，点赞按钮现在是红色的。但问题是当我单击该按钮时。我的期望是当我单击该按钮时，按钮变为白色，因为我只是使用更改我的状态，this.setState但为什么在 setState 之后调用 getDerivedStateFromProps？

这是一个问题，因为： isLiked: prevState.isLikedForCompare !== isLiked ? isLiked : prevState.isLikedForCompare将永远是错误的。所以我的状态isLike永远都是真的！

如何解决这个问题？

4

0 回答 0