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

时间:2020-07-07 16:17:45

标签: javascript reactjs react-hooks

因此,我正在开发清单应用程序,将我所有的类组件都转换为功能组件..但是当我尝试将清单值传递给子元素时,它给我一个错误,无法在undefined上设置.map < / p>

这是我的应用程序组件

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

我确定答案很简单,但我陷在google虫洞中,找不到答案...

更新...

出于某种原因,该属性作为对象而不是数组发送...

console.log(typeof props.inventory)总是返回一个对象,无论我做什么...

我尝试了几种方法...

1-将其作为数组扩展到属性值[... inventory]中会引发另一个错误

2-在useState钩子中声明为新的Array(),什么都没有

3-使用属性调用内的Array.from(inventory),还是一无所有。

我是新来的反应者,所以一定有我想念的东西

2 个答案:

答案 0 :(得分:1)

您要将数组转换为Object:

setInventory({
  ...inventory, newItem
})

它必须是:

setInventory([
  ...inventory, newItem
])

答案 1 :(得分:0)

这就是我做错了...

我的钩子更新函数语法错误,但是没有被react接受,因为无论如何,显然该属性始终作为对象传递?我不确定。.

反正我的钩子函数进行了结构调整...

代替

setInventory(
      ...inventory, newItem
    )

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

是的,它解决了。