Question

我正在使用功能组件和挂钩。首次呈现组件后，在useEffect函数中，我有一个循环，可以从产品列表中获得唯一的类别。

一旦提取了这些类别，我将使用setCategoriesState将它们存储在组件状态的数组中。但是，按照现状，除非重新渲染组件，否则状态不会反映类别的更新列表。有更好的方法吗？

const [categoriesState, setCategoriesState] = useState([])
var categories = []

useEffect(() => {
  for (let i = 0; i < props.products.items.length; i++) {
    if (categories.indexOf(props.products.items[i].category) === -1) {
      categories = [...categories, props.products.items[i].category]
    }
  }

  setCategoriesState(categories)

}, [])

这就是我使用CategoriesState

的方式

{categoriesState.map((cat) => <Text >{cat}</Text>)}

Answer 1

您应将categories声明包含在useEffect内，并传播categoriesState

const [categoriesState, setCategoriesState] = useState([])

useEffect(() => {
  let categories = [...categoriesState]

  for (let i = 0; i < props.products.items.length; i++) {
    if (categories.indexOf(props.products.items[i].category) === -1) {
      categories = [...categories, props.products.items[i].category]
    }
  }

  setCategoriesState(categories)

}, [])

加载组件后，如何立即使用钩子存储和更新数组？

1 个答案: