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

【问题标题】：How to pass hook value from parent to child in react.js如何在 react.js 中将钩子值从父级传递给子级
【发布时间】：2020-07-08 01:22:40
【问题描述】：

所以我正在开发一个库存应用程序，将我的所有类组件转换为功能组件.. 但是当我尝试将库存值传递给子元素时，它给了我一个错误，即无法在未定义上设置 .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(typeof props.inventory) 无论我做什么，总是返回一个对象...

我尝试了几种方法...

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

2- 在 useState 钩子中声明为 new Array()，仍然没有

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

我是新手，所以一定有什么我错过了

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

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

setInventory({
  ...inventory, newItem
})

一定是：

setInventory([
  ...inventory, newItem
])

【讨论】：

console.log(typeof variable) 将显示变量的类型。强烈建议使用调试器。它将显示闭包中的内容和类型
我编辑了它，但我仍然得到同样的错误..
console.log(typeof props.inventory) ?
它被记录为一个对象，这很奇怪，因为我将它声明为一个空数组，即使更改 useState 函数也不会更改它的声明...
没错，Array 是一个对象。那么console.log(props) 值是什么？

【解决方案2】：

所以这就是我做错了什么......

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

无论如何重组我的钩子函数修复它...

而不是

setInventory(
      ...inventory, newItem
    )

原来是这样

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

是的，解决了它..

【讨论】：