Question

项目的结构是我的 App.js 在加载时获取用户位置的地方。我想获取此信息并将其传递给子组件。我这样设置的原因是我将有 3 个组件都需要使用位置数据。

我真的很接近让它工作，但我似乎无法将数据传递给 Weather 组件。该应用程序编译成功，但不会呈现我想要的数据。我觉得我是如此，如此接近，但需要推动才能越过悬崖。

import { Route } from 'react-router-dom'

import './App.css'; 
import Navbar from './components/Navbar'
import Weather from './components/Weather'

// Defining our <App /> component the function name matches the file name
function App() {

    const [location, setLocation] = useState({lat: 0, long: 0})

    useEffect(()=>{
      const success = (position) =>{ 
        let lat = position.coords.latitude
        let long = position.coords.longitude
   
        
        console.log(lat, long)
        setLocation({lat: lat, long: long})
        // I have also tried ({lat, long})
        
      }
      navigator.geolocation.getCurrentPosition(success)
      
    },[])



  const routes = ['nasa','openweather','zomato']

  return ( 
    <div className="App"> 

    {/* Establish Navigation for the website */}
      <Navbar routes={routes} />
      <Route exact path="/nasa"></Route>


     <Route exact path="/openweather">
        <Weather position={location} />
      </Route>

这是天气组件

const Weather = ({ position }) => {
    return(
        <div>
        <p> long: {position.long}</p>
        <p> lat: {position.lat}</p>
      
        </div>
    )
}

export default Weather

Answer 1

太好了！您已经有了基本的想法，但您对应用状态的关注却少了一点，一切都会好起来的。

1- 请注意，您没有传递任何值来设置 location 状态

    // first it has started with undefined
    const [location, setLocation] = useState(); // you should have passed an initila state here...

应该

    // put any default long & lat you find suitable
    const [location, setLocation] = useState({ lat: 33.232, long: 35.125 });

并且当您设置新状态时，您没有将任何内容传递给 set 函数

      setLocation()

应该在哪里

      setLocation({ long: <xxx>, lat: <xxx> });

2- 从您的代码中可以看出，该行应该在 success 回调内，您可以在其中获得实际的经度和纬度。

3- 最后，当您将状态传递给子组件时，您没有从状态中指定任何属性（可能是因为您还没有状态的结构）

        <p> {position}</p>

应该

   <p> long: {position.long}</p>
   <p> lat:  {position.lat}</p>

无法使用钩子将数据传递给子组件

1 个答案: