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

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.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)
}, [])