Reactjs 需要帮助将此代码从类组件转换为函数挂钩（React）

目前正在我的项目上使用React版本16.13.1的TypeScript

试图让Autocomplete函数从此开始工作，但示例是类内组件，我正在使用函数挂钩

知道我的代码有什么问题吗？这是我从图书馆得到的一个例子

下面的代码示例

class MyMapWithAutocomplete扩展组件{
建造师（道具）{
超级（道具）
this.autocomplete=null
this.onLoad=this.onLoad.bind（this）
this.onPlaceChanged=this.onPlaceChanged.bind（this）
}
加载（自动完成）{
log（'autocomplete:'，autocomplete）
this.autocomplete=自动完成
}
onPlaceChanged（）{
如果（this.autocomplete！==null）{
console.log（this.autocomplete.getPlace（））
}否则{
console.log（'Autocomplete尚未加载！'）
}
}
渲染（）{
返回(
)
}
}

我目前拥有的

function GoogleMaps({ data = [], center, withAutocomplete = false }: MapProps) {
  const [setAutocomplete, autocomplete] = useState() as any
  const { isLoaded, loadError } = useLoadScript({
    googleMapsApiKey: 'xxx',
    libraries: ['places']
  })
  const onLoad = useCallback((props) => {
    setAutocomplete(props)
  }, [])

  const onPlaceChanged = () => {
    console.log('place', onLoad)
    if (autocomplete !== null) {
      console.log('test', autocomplete.getPlace())
    }
  }

  const renderMap = () => {
    return (
      <GoogleMap
        options={{
          mapTypeControl: false,
          streetViewControl: false
        }}
        mapContainerStyle={{ height: '600px' }}
        center={center}
        zoom={12}>
        {data.length > 0 &&
          data.map((d, idx) => {
            const position = { lat: d.lat, lng: d.lng }
            return <Marker position={position} key={`marker-${idx}`} />
          })}
        {withAutocomplete && (
          <Autocomplete onLoad={onLoad} onPlaceChanged={onPlaceChanged}>
            <TextField variant="outlined" />
          </Autocomplete>
        )}
      </GoogleMap>
    )
  }

  if (loadError) {
    return <div>Map cannot be loaded right now, sorry.</div>
  }

  return isLoaded ? renderMap() : <CircularProgress />
}

function GoogleMaps（{data=[]，center，withAutocomplete=false}:MapProps）{
const[setAutocomplete，autocomplete]=useState（）如有
常量{isLoaded，loadError}=useLoadScript({
谷歌地图：“xxx”，
图书馆：[“地点”]
})
const onLoad=useCallback（（道具）=>{
设置自动完成（道具）
}, [])
const onPlaceChanged=（）=>{
console.log（'place'，onLoad）
如果（自动完成！==null）{
console.log（'test'，autocomplete.getPlace（））
}
}
常量renderMap=（）=>{
返回(
{data.length>0&&
data.map（（d，idx）=>{
常量位置={lat:d.lat，lng:d.lng}
返回
})}
{使用自动完成&&(
)}
)
}
如果（加载错误）{
很抱歉，现在无法加载返回地图。
}
返回已加载？renderMap（）：
}

---

我运行这个时出错了TypeError:setAutocomplete不是函数

您在

useState

向后调用中有数组项：

const[setAutocomplete，autocomplete]=useState（）如有

你想要这个：

const[autocomplete，setAutocomplete]=useState（）如有

---

数组中的第一项是保存状态值的变量，第二项是React用于维护状态值的函数。在当前代码中，

setAutoComplete

不是一个函数，但

autoComplete

是一个函数。

您在

useState

回调中有数组项：

const[setAutocomplete，autocomplete]=useState（）如有

你想要这个：

const[autocomplete，setAutocomplete]=useState（）如有

---

数组中的第一项是保存状态值的变量，第二项是React用于维护状态值的函数。在您当前的代码中，

setAutoComplete

不是一个函数，但

autoComplete

是。

可能最好将

和任何
一样去掉-可能有助于捕获此类错误。您可以正确地键入
useState
如下：
useState（'initial val'）
或任何状态类型。是的，我不会不同意，wtf对我来说是错误的。我一点也没想到。哦，上帝。这就解决了。是的，我只是为了测试目的才加上的。稍后我将添加适当的类型，最好是去掉
，因为任何
都可能有助于捕获此类错误。您可以正确地键入
useState
如下：
useState（'initial val'）
或任何状态类型。是的，我不会不同意，wtf对我来说是错误的。我一点也没想到。哦，上帝。这就解决了。是的，我只是为了测试目的才加上的。稍后我将添加适当的类型
function GoogleMaps({ data = [], center, withAutocomplete = false }: MapProps) {
  const [setAutocomplete, autocomplete] = useState() as any
  const { isLoaded, loadError } = useLoadScript({
    googleMapsApiKey: 'xxx',
    libraries: ['places']
  })
  const onLoad = useCallback((props) => {
    setAutocomplete(props)
  }, [])

  const onPlaceChanged = () => {
    console.log('place', onLoad)
    if (autocomplete !== null) {
      console.log('test', autocomplete.getPlace())
    }
  }

  const renderMap = () => {
    return (
      <GoogleMap
        options={{
          mapTypeControl: false,
          streetViewControl: false
        }}
        mapContainerStyle={{ height: '600px' }}
        center={center}
        zoom={12}>
        {data.length > 0 &&
          data.map((d, idx) => {
            const position = { lat: d.lat, lng: d.lng }
            return <Marker position={position} key={`marker-${idx}`} />
          })}
        {withAutocomplete && (
          <Autocomplete onLoad={onLoad} onPlaceChanged={onPlaceChanged}>
            <TextField variant="outlined" />
          </Autocomplete>
        )}
      </GoogleMap>
    )
  }

  if (loadError) {
    return <div>Map cannot be loaded right now, sorry.</div>
  }

  return isLoaded ? renderMap() : <CircularProgress />
}