将第三方api数据插入流星集合

Question

我在尝试将我从CockTaiDB API获取的一些数据保存到我的Meteor Collection中时遇到了麻烦

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通话。使用按钮映射以添加名称，图像和指令。