如何仅在第一次使用init函数

Question

如何仅在第一次使用此fetchItems函数？

每次使用这个setBrands函数时，它都会激活这个fetchItems函数并设置起始值，我希望它只被调用一次

const [brands, setBrands] = useState({})

//品牌是这样的品牌＝{CAT:"，RET:"、RTF:"和NW:"}

useEffect(() => {
const fetchItems = async () => {
for (const b in brands) {
brands[b] = await getCarts(b.id) //i am using like this brands[b] = await getCarts(b.id), but i think that is bad, i have to use setBrands()?
}
}
fetchStoreItems()
}, [brands])
return (
<>
<CartForm
setBrands={setBrands}
/>

我正在从CartForm更新具有此功能的品牌setBrands

注意：如果我删除品牌依赖项，我会收到此错误警告React Hook useEffect缺少一个依赖项："brands"。任何一个包括它或删除依赖数组react hook/exhaust deps

Answer 1

useEffect的依赖数组会影响回调的调用时间。如果只想在装载过程中发生某些事情，则需要有一个空的依赖数组。

useEffect(() => {
// do your fetch here
}, [])

旁注：

useEffect(() => {
// Gets called on first render
}, [])
useEffct(() => {
// Gets called when value changes
}, [value])
useEffect(() => {
// Gets called every render
})

更新：

const [brands, setBrands] = useState({})
useEffect(() => {
...
for () {
const data = await getCart(id)
setBrands((prevBrands) => ({
...prevBrands,
[key]: data
}))
}
...
}, [setBrands])