ReactJS:对象映射数组的解构变量未定义

时间:2019-06-13 16:52:26

标签: javascript arrays reactjs object

我正在尝试映射对象[{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>与对象数组的长度一样多。那怎么可能呢?有什么办法可以解决?

这是控制台日志记录:

enter image description here

这是日志记录状态的图像。

enter image description here

这就是我从服务器获取配料的方式

 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)
    })

1 个答案:

答案 0 :(得分:0)

在输出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)