[英]Trouble passing data to a child component with hooks
The structure of the project is where my App.js gets the user location when it loads.项目的结构是我的App.js在加载时获取用户位置的地方。 I want to take this information and pass it down to a child component.
我想获取这些信息并将其传递给子组件。 The reason I set it up like this is that I will have 3 components that all need to use the location data.
我这样设置的原因是我将有 3 个组件都需要使用位置数据。
I am really close to getting this to work, but I cannot seem to get the data over to the Weather component.我真的很接近让它工作,但我似乎无法将数据传递给 Weather 组件。 The App compiles successfully but it will not render the data I want it to.
该应用程序编译成功,但它不会呈现我想要的数据。 I feel like I am so, so close but need that push to get over the cliff.
我觉得我是如此,如此接近,但需要推动才能越过悬崖。
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>
Here is the Weather component这是天气组件
const Weather = ({ position }) => {
return(
<div>
<p> long: {position.long}</p>
<p> lat: {position.lat}</p>
</div>
)
}
export default Weather
Great.伟大的。 You've the basic idea but you are missing a little attention to your app state and everything will be okay.
你有基本的想法,但你对你的应用程序 state 没有一点关注,一切都会好起来的。
1- note that you didn't pass any value to set the location
state 1-请注意,您没有传递任何值来设置
location
state
// first it has started with undefined
const [location, setLocation] = useState(); // you should have passed an initila state here...
should be应该
// put any default long & lat you find suitable
const [location, setLocation] = useState({ lat: 33.232, long: 35.125 });
and when you set the new state you didn't pass anything to the set function当您设置新的 state 时,您没有将任何内容传递给集合 function
setLocation()
where it should be它应该在哪里
setLocation({ long: <xxx>, lat: <xxx> });
2- and as I can see from your code that line should be inside the success
callback where you get the actual long and lat. 2-正如我从您的代码中看到的那样,该行应该在
success
回调中,您可以在其中获得实际的经纬度。
3- and finally when you've passed down the state to the child component you didn't specify any property from your state(maybe because you didn't have a structure for your state yet) 3-最后,当您将 state 传递给子组件时,您没有从您的状态中指定任何属性(可能是因为您还没有 state 的结构)
<p> {position}</p>
should be应该
<p> long: {position.long}</p>
<p> lat: {position.lat}</p>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.