setState会增加所有实例的like计数。如何为类组件中的每个单独记录增加like计数？

在类组件中，可以通过为每个单独记录增加like计数的方式，实现setState的目标。具体步骤如下：

在类组件的构造函数中，为每个记录添加一个独立的like计数属性，可以设置初始值为0。

constructor(props) {
  super(props);
  this.state = {
    records: [
      { id: 1, name: "Record 1", likeCount: 0 },
      { id: 2, name: "Record 2", likeCount: 0 },
      { id: 3, name: "Record 3", likeCount: 0 },
      // 添加更多记录...
    ]
  };
}

创建一个方法，用于增加单独记录的like计数。该方法需要接收一个记录的唯一标识符作为参数，并使用setState更新该记录的likeCount属性。

increaseLikeCount(recordId) {
  this.setState(prevState => {
    const updatedRecords = prevState.records.map(record => {
      if (record.id === recordId) {
        return { ...record, likeCount: record.likeCount + 1 };
      }
      return record;
    });
    return { records: updatedRecords };
  });
}

在类组件的render方法中，根据记录数组渲染每个记录，并添加一个按钮来触发增加like计数的方法。

render() {
  return (
    <div>
      {this.state.records.map(record => (
        <div key={record.id}>
          <span>{record.name}</span>
          <span>Like Count: {record.likeCount}</span>
          <button onClick={() => this.increaseLikeCount(record.id)}>Like</button>
        </div>
      ))}
    </div>
  );
}

通过以上步骤，我们为每个单独记录增加了like计数功能。当点击对应记录的"Like"按钮时，将会触发increaseLikeCount方法，更新对应记录的likeCount属性，并通过setState方法重新渲染组件。

腾讯云相关产品和产品介绍链接地址: