如何從一個組件導入一個函數對另一個組件做出反應以呈現它？

Question

我正在使用鈎子在 react 中進行我的第一個測試。 我創建了一個“地理”組件來在屏幕上顯示坐標

import React, { useEffect, useState } from 'react';


function useCoordinates() {
    const [coordinates, setCoordinates] = useState({
        latitude: null,
        longitude: null
    });
    let geoId;

    useEffect(() => {
        geoId = window.navigator.geolocation.watchPosition(position => {
            setCoordinates({
                latitude: position.coords.latitude,
                longitude: position.coords.longitude
            });
        });
        return () => {
            navigator.geolocation.clearWatch(geoId);
        };
    });

    return coordinates;
}

export default function coordinates() {
    const coordinates = useCoordinates();

    return coordinates.latitude == null ? (
        <div>Loading ...</div>
    ) : (
        <div>
            <h2>Latitude: {coordinates.latitude}</h2>
            <h2>Longitude: {coordinates.longitude}</h2>
        </div>
    )
}

現在我正在嘗試將它導入到我的“應用程序”組件中以呈現它。 我已經導入了組件和函數，並在“應用程序”組件的“渲染”中調用它，這是我想要顯示它的地方。

import React, { useState } from "react";
import "./App.css";
import { sum } from "./lib/math";
import geo, { coordinates } from './components/geo';

function App() {
  const [param1, setParam1] = useState(0);
  const [param2, setParam2] = useState(0);
  const [result, setResult] = useState(0);

  const handleSum = () => {
    setResult(sum(param1, param2));
    setParam1(0);
    setParam2(0);
  };

  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <div>
        <input
          id="param1"
          type="number"
          value={param1}
          onChange={(e) => setParam1(e.target.value)}
        />

        <input
          id="param2"
          type="number"
          value={param2}
          onChange={(e) => setParam2(e.target.value)}
        />

        <button id="sum" onClick={handleSum}>
          Sumar
        </button>

        <p id="result">{result}</p>
      </div>
      <div>
        Count is: {count}
        <button onClick={() => setCount(count + 1)}>Increase</button>
      </div>
      <coordinates />
    </div>
  );
}

export default App;

控制台返回以下錯誤“在既不是 React 函數組件也不是自定義 React Hook 函數的函數“坐標”中調用了 React Hook“useCoordinates”。

我究竟做錯了什么？ 我應該如何導入它？

Answer 1

導入語句不正確，您也沒有導出 customHook。

export function useCoordinates() { // maybe export this if you want to use this else where
    const [coordinates, setCoordinates] = useState({
        latitude: null,
        longitude: null
    });
    let geoId;

    useEffect(() => {
        geoId = window.navigator.geolocation.watchPosition(position => {
            setCoordinates({
                latitude: position.coords.latitude,
                longitude: position.coords.longitude
            });
        });
        return () => {
            navigator.geolocation.clearWatch(geoId);
        };
    });

    return coordinates;
}

export default function Coordinates() { // Pascal case is best for components
    const coordinates = useCoordinates();

    return coordinates.latitude == null ? (
        <div>Loading ...</div>
    ) : (
        <div>
            <h2>Latitude: {coordinates.latitude}</h2>
            <h2>Longitude: {coordinates.longitude}</h2>
        </div>
    )
}

假設您只想導入組件，導入應該是這樣的：

import Coordinates from './components/geo';

用它作為

<Coordinates/>