Type '(oldPlacePhotos: string[]) => string[]' is missing the following properties from-CodePudding

Cannot figure this one out for the life of me.

Here is the code example

Parent.tsx

  const [placePhotos, setPlacePhotos] = useState<string[]>([])

  ...
  useEffect(() => foo(setPlacePhotos), [])

helper.ts where foo() exists

type GooglePlaceInfoObject = {
  setPlacePhotos?: (photos: Array<string>) => string[]
}

foo({ setPlacePhotos }: GooglePlaceInfoObject) {
        if (setPlacePhotos) {
          // this returns an array of strings
          const photosArray = googlePlaceDetailsObject.photos.map(photo => {
            return photo.getUrl({
              maxWidth: 320,
              maxHeight: 426,
            })
          })
          // error happens here!
          setPlacePhotos((oldPlacePhotos: string[]) => [
            ...oldPlacePhotos,
            ...photosArray,
          ])
        }
}

Error when using setPlacePhotos

Argument of type '(oldPlacePhotos: string[]) => string[]' is not assignable to parameter of type 'string[]'.
  Type '(oldPlacePhotos: string[]) => string[]' is missing the following properties from type 'string[]': pop, push, concat, join, and 28 more.

how do you fix this error?

CodePudding user response：

Your custom GooglePlaceInfoObject type unnecessarily restricts the type of setPlacePhotos so that it does not support the functional form of setState. To fix this, you can change it to something like:

type GooglePlaceInfoObject = {
  setPlacePhotos?: (photos: string[] | ((oldPhotos: string[]) => string[])) => void
}