如何在react.js中将钩子值从父对象传递给子对象

Question

所以我正在开发一个库存应用程序，将我的所有类组件转换为功能组件。。但当我试图将库存值传递给子元素时，它会给我一个错误，即无法在未定义的上设置.map

这是我的应用程序组件

const App = () => {
const [inventory, setInventory] = useState([]);
const [pointer, setPointer] = useState('')
const addProduct = (item) => {
if(inventory.some(product => product.name === item.name)){
setInventory(
inventory.map(product => {
if(product.name === item.name){
product.quantity += parseInt(item.quantity);
return product;
} return product;
})
)
return;
}
const newItem = {
id: uuid(),
name: item.name,
quantity: parseInt(item.quantity),
unit: item.unit
}
setInventory(
...inventory, newItem
)
}
const updateQuantity = (item)=> {
// this.Modal.current.toggleModal();
setPointer(item.id)
}
const confirmUpdate = (quantity, pointer) => {
setInventory(inventory.map(item => {
if(item.id === pointer){
item.quantity = quantity;
return item;
}
return item;
})
)
}
const deleteItem = (id) => {
setInventory(
inventory.filter(item => item.id !== id)
)
}
return (
<div className="App">
<Header />
<div className="container">
<h1 style={{ width: '100%' }}>Inventory</h1>
<AddItem addProduct={addProduct}/>
<Inventory updateQuantity={updateQuantity} deleteItem={deleteItem} inventory={inventory}> </Inventory>
</div>
<UpdateModal confirmUpdate={confirmUpdate} pointer={pointer}/>
</div>
)
}

子组件

const Inventory = props => {
return (props.inventory.map(item => (
<Item
key={item.id}
updateQuantity={props.updateQuantity}
deleteItem={props.deleteItem} 
item={item} 
/>)))
}

我只想把应用程序组件中的库存值传递给库存组件来映射它……但我得到了以下错误

TypeError: props.inventory.map is not a function

我确信答案很简单，但我被困在谷歌的虫洞里，找不到答案。。。

更新。。。

由于某种原因，属性被作为对象而不是数组发送。。。

console.log(typeofprops.inventory(无论我做什么都会返回一个对象…

我尝试了几种方法。。。

1-将其展开为属性值[…inventory]内的数组，会引发另一个错误

2-在useState钩子内声明为新的Array((，仍然没有

3-在属性调用中使用Array.from(inventory(，仍然没有。。

我是新手，所以肯定有什么东西我错过了

Answer 1

您在此处将数组转换为Object：

setInventory({
...inventory, newItem
})

必须是：

setInventory([
...inventory, newItem
])

Answer 2

所以我做错了什么。。。

我的钩子更新函数有一个错误的语法，但react没有捕获它，因为显然属性总是作为对象传递的，不管怎样？我不确定。。

不管怎样，重组我的钩子功能修复了它…

而不是

setInventory(
...inventory, newItem
)

是

setInventory(inventory =>
[...inventory, newItem]
)

是的，这解决了问题。