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

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

您应该在useEffect 中包含您的categories 声明，并传播您的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)

}, [])