Добавить одно значение из массива списков - реагировать нативно

Question

Этот API требует, чтобы я отправлял некоторые данные через запятую, при обработке пользовательского ввода я использую чекбоксы, например

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

Я определенно вижу входные данные, если я рендерил selectedIngredients в FlatList (используя item.value), но когда я пытаюсь распечатать реальный URL, с которым я работаю, я получил этот [object, Object]

Я использовал this.state.selectedIngredients в представлении, вот результат:

url.com / api /? = [Объект объекта], [объект объекта], [объект объекта]

Внутри моей функции search я использую этот код для обработки ввода пользователя:

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

В документации библиотеки говорится, что выбранные элементы являются массивом типа string или {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

Кроме того, посмотрите Мухаммеда Ашфака для гораздо менее неуклюжий ответ.