reactjs - 将 3rd 方 api 数据插入流星集合

Question

我在尝试将从 CockTaiDB API 获取的一些数据保存到我的 Meteor 集合中时遇到问题

state = {
randomCocktail: []
};

async componentDidMount() {
try {
  const res = await fetch(
    'https://www.thecocktaildb.com/api/json/v1/1/random.php'
  );
  const randomCocktail = await res.json();
  this.setState({
    randomCocktail: randomCocktail.drinks
  });
} catch (e) {
  console.log(e);
 }
}

addDrink = (cocktail) => {
Drinks.insert({
  name: cocktail.strDrink,
  instructions: cocktail.strInstructions,
  image: cocktail.strDrinkThumb
 });
};

{this.state.randomCocktail.map((cocktail) => {
      return (
        <div key={cocktail.idDrink}>
          <h1>{cocktail.strDrink}</h1>
          {cocktail.strInstructions}
          <img src={cocktail.strDrinkThumb} alt="" />
          <button onClick={this.addDrink}>Add Drink</button>
        </div>
      );
    })}

这是我保存到集合中的函数，但我得到的只是一个带有 id 的新条目。我使用 axios.get 检索数据，我应该使用 axios.post 以某种方式将其保存到我的 Drinks 集合中吗？

编辑：状态和 api 调用。使用按钮映射以添加名称、图像和说明。