我的 function 返回 object。 如何在 React 中將返回值設置為特定的鍵值

Question

我的反應代碼中有一個 function ......

  const getLatLngFromAddress = async () => {
    try {
      const response = await Geocode.fromAddress(state.address.address1)
      const { lat, lng } = response.results[0].geometry.location;
      return { lat, lng }
    } catch (err) {
      console.log(err.message)
    }
  }

返回 object。 我想將我的 state 設置為僅 object 的特定鍵，而不是 object 本身...

  useEffect(async () => {
    setState({
      ...state,
      address: {
        ...state.address,
        lat: await getLatLngFromAddress().lat,
        lng: await getLatLngFromAddress().lng
      }
    })

  }, []);

上面的 useEffect 返回未定義。 有沒有辦法做到這一點？

Answer 1

您需要從 promise 解析的值中讀取屬性。 目前，您正在嘗試從 promise 本身讀取它們，然后await那些undefined的值。

lat: (await getLatLngFromAddress()).lat,

但是，您調用getLatLngFromAddress兩次。 將值存儲在變量中，然后重用它們。

  useEffect(async () => {
    const latlng = await getLatLngFromAddress()
    setState({
      ...state,
      address: {
        ...state.address,
        ...latlng,
      }
    })

  }, []);

Answer 2

調用該方法一次，並將其設置為您的 state：

useEffect(async () => {
    const {lat, lng} = await getLatLngFromAddress();
    setState({
      ...state,
      address: {
        ...state.address,
        lat: lat,
        lng: lng
      }
    })

  }, []);

如果您不想重復所有變量，也可以傳播結果：

useEffect(async () => {
    const result = await getLatLngFromAddress();
    setState({
      ...state,
      address: {
        ...state.address,
        ...result
      }
    })

  }, []);