react中从类重构为功能钩子组件

Posted 2023-02-23

【中文标题】react中从类重构为功能钩子组件

【英文标题】：Reconstructing from class to functional hook component in react

【发布时间】：2020-10-15 04:29:37

【问题描述】：

只是想将我的应用程序从基于类的组件重新设计为基于功能挂钩的组件，并被这个回调 setState 代码块所吸引，并且无法使用有效的挂钩来实现这一点：

this.setState((prevState) => (
    items: [
      ...prevState.items,
      
        itemtitle: '',
        description: '',
        articlenr: '',
        amount: '',
        unit: '',
        price: '',
        taxpercentage: '',
        total: ''
      
    ],
    showItemDetail: true
  ))

【问题讨论】：

函数组件中没有this.setState()。相反，您需要使用useState hook。

我知道，上面是我想翻译以使用 hook 的工作代码

【参考方案1】：

您是在问如何将其转换为钩子？如果是这样，您将不得不发布您所在州的样子。

如果你的状态是整个对象，你可以这样做

import react, useState from "react";

const [items, setItems] = useState([]);

const [showItemDetail, setShowItemDetail] = useState(false)

setItems(items => [...items,
      
        itemtitle: '',
        description: '',
        articlenr: '',
        amount: '',
        unit: '',
        price: '',
        taxpercentage: '',
        total: ''
      
    ]
  )

setShowItemDetail(true)

【讨论】：

const [items, setItems] = useState([ itemtitle: "", description: "", articlenr: "", amount: "", unit: "", price: "", taxpercentage: "", total: "" ])

const [showItemDetail, setShowItemDetail] = useState(false)

您必须分别更新每个状态，我更新了答案以反映这一点