当父母的道具发生变化时，不重新渲染孩子

debugcn 发表于 Dev

安东尼·达

我在对子项进行重新渲染时遇到一些问题，我将方法传递给子项以查看是否应显示按钮，但是当父项的状态更改时，不会重新渲染子项。

我尝试了按钮的禁用属性，但也没有用。

这是我的代码（我删除了不必要的部分）：

function Cards(props) {
  const isCardInDeck = (translationKey) => {
    return props.deck.some(
      (card) => !!card && card.translationKey === translationKey
    );
  };

  const addToDeck = (card) => {
    if (!isCardInDeck(card.translationKey) && !!card) {
      props.deck.push(card);
    }
  };

  const removeFromDeck = (card) => {
    if (isCardInDeck(card.translationKey) && !!card) {
      var index = props.deck.findIndex(
        (c) => c.translationKey === card.translationKey
      );
      props.deck.splice(index, 1);
    }
  };

  return (
    <div className="cardsContent">
      <div className="cards">
        {cardList.length > 0 ? (
          cardList.map((item, index) => {
            return (
              <Card key={index} card={item} addToDeckDisabled={isCardInDeck(item.translationKey)} addToDeckClick={addToDeck} removeFromDeckClick={removeFromDeck} />
            );
          })
        ) : (
          <span>
            <FormattedMessage id="app.cards.label.no.card.found" defaultMessage="No card found with filter."/>
          </span>
        )}
      </div>
    </div>
    );
}

function Card(props) {

  const toggleShowDescription = () => {
    if (!showDescription) {
      setShowDescription(!showDescription);
    }
  };

  return (
    <div onClick={toggleShowDescription} onBlur={toggleShowDescription} >
      <img src={"../images/cards/" + props.card.image} alt={props.card.image + " not found"} />
      {showDescription ? (
        <div className="customCardDetail">
          <div className="cardName"></div>
          <div className="cardType">
            {props.addToDeckDisabled ? (
              <Button onClick={() => { props.removeFromDeckClick(props.card);}} startIcon={<RemoveIcon />}>
                Remove from deck
              </Button>
            ) : (
              <Button onClick={() => { props.addToDeckClick(props.card); }} startIcon={<AddIcon />}>
                Add to deck
              </Button>
            )}
          </div>
          <div className="cardDescription">
            <span>
              <FormattedMessage id={props.card.description} defaultMessage={props.card.description} />
            </span>
          </div>
        </div>
      ) : (
        ""
      )}
    </div>
  );
}

杜德

您的代码不会更新状态。Cards改变它正在接收的道具。要在React的功能组件中使用状态，您应该使用useState钩子。

Cards 然后看起来像这样：

function Cards(props) {
  const [deck, setDeck] = useState(props.initialDeck)

  const isCardInDeck = (translationKey) => {
    return deck.some(
      (card) => !!card && card.translationKey === translationKey
    );
  };

  const addToDeck = (card) => {
    if (!isCardInDeck(card.translationKey) && !!card) {
      setDeck([...deck, card])
    }
  };

  const removeFromDeck = (card) => {
    if (isCardInDeck(card.translationKey) && !!card) {
      setDeck(deck.filter(deckItem => deckItem.translationKey !== card.translationKey))
    }
  };

  return (
    <div className="cardsContent">
      <div className="cards">
        {cardList.length > 0 ? (
          cardList.map((item, index) => {
            return (
              <Card key={index} card={item} addToDeckDisabled={isCardInDeck(item.translationKey)} addToDeckClick={addToDeck} removeFromDeckClick={removeFromDeck} />
            );
          })
        ) : (
          <span>
            <FormattedMessage id="app.cards.label.no.card.found" defaultMessage="No card found with filter."/>
          </span>
        )}
      </div>
    </div>
    );
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。