ReactJS: неструктурированные переменные сопоставленного массива объектов не определены

Question

Я пытаюсь отобразить массив объектов [{ingredient: '', quantity: ''}] и получить от него свойства с деструктуризацией, и это код

 <ul>
     {this.state.ingredients.map(({ ingredient, quantity }, k) => {
        return (
          <div key={k}>
            <li key={k}>{ingredient} - {quantity}</li><br />
          </div>
        )
     })}
 </ul>

ингредиент и количество возвращают неопределенное значение, даже если они имеют значения в состоянии, но есть также что-то, столько же <li> в <ul>, сколько длины массива объектов. так как это возможно? есть ли способ это исправить?

Вот логирование консоли:

и вот изображение регистрации состояния. Ингредиенты

и вот как я получаю ингредиенты с сервера

 axios.get(`/api/recipe/${params.id}/${params.name}`)
    .then(res => res.data)
    .then(data=>{

        var jdata = JSON.parse(data.recipe)
        this.setState({
           ingredients: jdata.ingredients,
           ... other properties

        })
        console.log(jdata.ingredients)
    })

Answer 1

Исходя из вывода console.log(JSON.stringify(jdata.ingredients)), ваш массив является массивом массивов, преобразуйте ваш массив массивов в один массив.

this.setState({
  ...
  ingredients: [].concat.apply([], jdata.ingredients),
  ...
})

const arrays = [[{"ingredient":"sdasd","quantity":"asdas"}],[{"ingredient":"asdasd","quantity":"dsd"}]]

const merged = [].concat.apply([], arrays);

console.log(merged)