当一张卡的状态发生变化时，列表中的所有卡都会重新呈现

Question

问题：每当用户点击卡片上的内容时，整个列表都会重新呈现，导致所有卡片重新呈现。

以下是GIF：

我有一个名为list的状态，它是父组件Category中的一组卡对象。每张卡都有以下结构：

{
  id: some-id,
  title: 'Some Title',
  likes: 1,
  category: 'design'
}

然后我的JSX中有一个<ul>，我正在映射具有列表的状态，如下所示：

const cards = this.state.list.map(card => (
  <Card 
    key={card.id} 
    title={card.title}
    likes={card.likes}
  />
));

在Card组件中，当用户通过单击“赞”按钮触发事件监听器时，发生的事情是，不是只更新该卡的状态，而是更新整个列表，导致所有卡重新渲染。

编辑：我实际上没有通过updateLike。结构有点混乱，但让我解释一下：

我创建了一个远程NodeJS服务器，其对象具有likes计数器。父组件Category及其状态list数组无权访问它。但是，单个卡组件可以。

卡组件有3种状态：likeBtnClass，icon和text。

要更新卡的类似计数器，我正在执行以下操作：

onLikeClick() {
  // Props
  const { category, id } = this.props;
  // Update the icon
  const state = this.state;
  const updatedIcon = (state.icon === 'like') 
    ? 'like_outline'
    : 'like';
  const updatedClass = (state.icon === 'like') 
    ? 'btn'
    : 'btn btn-saved';

  let urlString = `${API_ENDPOINT}/${category.toLowerCase()}/${id}`;

  // If current state = saved: post req to like
  let reqURL = (updatedIcon === 'like') ? `${urlString}/like` : `${urlString}/unlike`;

  this.setState({
    btnClass: updatedClass,
    icon: updatedIcon,
  });

  // Send POST request via axios
  axios.post(reqURL, {});
}

Answer 1

您可以在卡片上设置shouldComponentUpdate（），只有在发生更改时才会呈现该组件。