从列表数组中追加一个值 - 本机反应

Question

这个API要求我发送一些逗号分隔的数据，在处理用户输入时我使用复选框这样

   <SelectMultiple
      items={dairy}
      selectedItems={this.state.selectedIngredients}
      onSelectionsChange={this.onSelectionsChange} />

如果我在FlatList上渲染selectedIngredients（使用item.value），我肯定可以看到输入，但是当我尝试打印我正在使用的实际url时，我得到了这个[object，Object]

我在视图中使用了this.state.selectedIngredients，结果如下：

url.com/api/?=[object对象]，[对象对象]，[对象对象]

在我的search函数中，我使用该代码来处理用户输入：

  const { selectedIngredients } = this.state;
  let url = "url.com/api/?i=" + selectedIngredients

在库的文档中，他们说所选项是字符串的类型数组或{label，value}我使用在那里提供的方法来附加所选项：

  onSelectionsChange = (selectedIngredients) => {
    // selectedFruits is array of { label, value }
    this.setState({ selectedIngredients})
  }

我尝试在它们两个上添加.value它没有解决我的问题。有人可以帮忙吗？

控制台日志this.state.selectedIngredients：

Array [
  Object {
    "label": "Goat cheese",
    "value": "Goat cheese",
  },
  Object {
    "label": "Cream cheese",
    "value": "Cream cheese",
  },
  Object {
    "label": "Butter",
    "value": "Butter",
  },
]

Answer 1

selectedIngredients = [
 {
    "label": "Goat cheese",
    "value": "Goat cheese",
  },
  {
    "label": "Cream cheese",
    "value": "Cream cheese",
  },
  {
   "label": "Butter",
    "value": "Butter",
  },
]

let selectedValues = selectedIngredients.map((ingredient)=> ingredient.value)
let selectedValuesInString = selectedValues.join(',');
console.log(selectedValuesInString)

Answer 2

它有点笨拙，但它会给你一个逗号分隔的字符串，没有逗号。

const { selectedIngredients } = this.state;
let sep = "";
let selectedIngAsString = "";
selectedIngredients.forEach(s => {
   selectedIngAsString += sep + s.value;
   sep = ",";
});
let url = "url.com/api/?i=" + selectedIngAsString

见https://codesandbox.io/s/m5ynqw0jqp

另外，请参阅Mohammed Ashfaq的一个不那么笨拙的答案。