Как сохранить и обновить массив, используя хуки сразу после загрузки компонента?

Question

Я использую функциональные компоненты и крючки. Как только компонент отображается впервые, в функции useEffect у меня есть al oop для получения уникальных категорий из списка продуктов.

После извлечения этих категорий я сохраняю их в массив в состоянии компонента с 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)

}, [])

Вот как я использую категорииState

{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)

}, [])