typescript 类型错误不能分配字符串或未定义给字符串[]

Question

Can't fix a typescript error, I check the console log and the regions that Set returns is an array of strings which is exactly what I have for region type in my state. Why would this not work?

Code:

const [regions, setRegions] = useState<string[]>([])

useEffect(() => {
    if (areasOptions) {
      const regions = [[...new Set(areasOptions.areas.map((item: ListObject) => item.region))]]
      setRegions(regions) // Error
    }
  }, [areasOptions])

Error:

Argument of type '(string | undefined)[][]' is not assignable to parameter of type 'SetStateAction'. [0] Type '(string | undefined)[][]' is not assignable to type 'string[]'. [0] Type '(string | undefined)[]' is not assignable to type 'string'.

Answer 1

This non-react example should work for you:

function setRegions(abc: string[]) {

}
type ListObject = {
    region: string
}

const areasOptions: {areas: ListObject[]} = {
    areas: [
        {region: "a"},
        {region: "b"}
    ]
}

const regions = [...new Set(areasOptions.areas.map((item) => item.region))]
setRegions(regions)