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

因此，我正在开发一个库存应用程序，将我所有的类组件转换为功能组件。。但是，当我尝试将库存值传递给子元素时，它会给我一个错误，即未定义时不能设置.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} 
        />)))
    }

const-App=（）=>{
const[inventory，setInventory]=useState（[]）；
const[pointer，setPointer]=useState（“”）
const addProduct=（项目）=>{
if（inventory.some（product=>product.name==item.name））{
设置库存(
inventory.map（产品=>{
if（product.name==item.name）{
product.quantity+=parseInt（item.quantity）；
退货产品；
}退货产品；
})
)
返回；
}
常量newItem={
id:uuid（），
名称：item.name，
数量：parseInt（项目数量），
单位：item.unit
}
设置库存(
…库存，新项目
)
}
常量updateQuantity=（项）=>{
//this.Modal.current.toggleModal（）；
setPointer（item.id）
}
const confirmUpdate=（数量、指针）=>{
setInventory（inventory.map（item=>{
if（item.id==指针）{
item.quantity=数量；
退货项目；
}
退货项目；
})
)
}
常量deleteItem=（id）=>{
设置库存(
inventory.filter（item=>item.id！==id）
)
}
返回(
库存
)
}

子组件

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

const Inventory=props=>{
返回（props.inventory.map）（项目=>(
)))
}

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

TypeError:props.inventory.map不是一个函数

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

更新

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

不管我做什么，console.log（typeof props.inventory）总是返回一个对象

我试过几种方法

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

2-在useState钩子中声明为一个新数组（），仍然是空的

3-在属性调用中使用Array.from（inventory），仍然没有任何内容

---

我是新手，所以我肯定缺少什么东西

您正在将数组转换为对象：

setInventory({
  ...inventory, newItem
})

它必须是：

setInventory([
  ...inventory, newItem
])

---

这就是我做错的地方

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

无论如何，重新构造我的钩子函数修复了它

而不是

setInventory(
      ...inventory, newItem
    )

是的

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

---

是的，问题解决了。

控制台。日志（变量类型）

将显示变量类型。强烈建议使用调试器。它将显示闭包中的内容和类型。我编辑了它，但仍然得到相同的错误。

console.log（typeof props.inventory）

？它被记录为一个对象，这很奇怪，因为我将它声明为一个空数组，即使更改useState函数也不会更改它的声明……没错，数组是一个对象。那么什么是

console.log（props）

值呢？