我正在尝试映射对象[{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)
})
答案 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)