React 花店应用：使用 API 和收藏功能构建动态植物列表

import React, { Component } from 'react';

class PlantList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      plants: [], // 存储来自 API 的植物数据
      favorites: [], // 存储收藏的植物列表
    };
  }

  componentDidMount() {
    // 从 API 获取数据
    fetch('https://www.fastmock.site/mock/3c02a69b3952632e311022710cb48a6c/plant/getPlants')
      .then((response) => response.json())
      .then((data) => {
        this.setState({ plants: data.result.plantList });
      })
      .catch((error) => console.error('获取数据时出错:', error));
  }

  toggleFavorite = (plantID) => {
    // 切换植物的收藏状态
    const { favorites } = this.state;
    if (favorites.includes(plantID)) {
      // 如果已经收藏，从收藏列表中移除
      this.setState({ favorites: favorites.filter((id) => id !== plantID) });
    } else {
      // 如果不在收藏列表中，添加到收藏列表中
      this.setState({ favorites: [...favorites, plantID] });
    }
  };

  render() {
    const { plants, favorites } = this.state;

    return (
      <div>
        <h2>收藏列表</h2>
        <ul style={{ listStyleType: 'none' }}>
          {plants
            .filter((plant) => favorites.includes(plant.plantID))
            .map((favPlant) => (
              <li key={favPlant.plantID}>
                {favPlant.name} 
                <button onClick={() => this.toggleFavorite(favPlant.plantID)}>
                  {favorites.includes(favPlant.plantID) ? '取消收藏' : '收藏'}
                </button>
              </li>
            ))}
        </ul>
        <h1>鲜花列表</h1>
        <ul style={{ listStyleType: 'none' }}>
          {plants.map((plant) => (
            <li key={plant.plantID} style={{ width: '375px', height: '400px', float:'right'}}>
              <img src={plant.coverURL} alt={plant.name} style={{width:'200px', height:'200px'}}/>
              <p>{plant.name}</p>
              <p>{plant.engName}</p>
              <p>{plant.area}</p>
              <button onClick={() => this.toggleFavorite(plant.plantID)}>
                {favorites.includes(plant.plantID) ? '已收藏' : '收藏'}
              </button>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default PlantList;