Question

因此，我正在开发清单应用程序，将我所有的类组件都转换为功能组件..但是当我尝试将清单值传递给子元素时，它给我一个错误，无法在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），还是一无所有。

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

Answer 1

您要将数组转换为Object：

setInventory({
  ...inventory, newItem
})

它必须是：

setInventory([
  ...inventory, newItem
])

Answer 2

这就是我做错了...

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

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

代替

setInventory(
      ...inventory, newItem
    )

是

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

是的，它解决了。

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

2 个答案: