[英]How can i access object properties taken from an API, and pass them into my components in React?
im a beginner in React js, and this is my weather app, which takes data from an API.How can i use props to pass in the data that i want to pass into my components?我是 React js 的初学者,这是我的天气应用程序,它从 API 获取数据。如何使用道具将我想要传递到我的组件的数据传递? I tried accessing property and storing it into a variable first, and then pass it, but it says it is undefined and shows error, and i think this happens because it cant assign it a value before i fetch the data from the API.For example, i want to access and pass the degrees value from the weather object to my DegreesContainer component.
我尝试先访问属性并将其存储到一个变量中,然后将其传递,但它说它未定义并显示错误,我认为这是因为在我从 API 获取数据之前它无法为其分配一个值。例如,我想从天气 object 访问度值并将其传递给我的 DegreesContainer 组件。
const AppContainer = () => {
const [query,setQuery]=useState('');
const [weather,setWeather]=useState({});
const search = (event) => {
if(event.key==='Enter'){
axios.get(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`)
.then(result=>{
setWeather(result.data);
setQuery('');
console.log(result);
})
}
};
return (
<div className='app-container'>
<Searchbar query={query} setQuery={setQuery} search={search}/>
<DegreesContainer/>
</div>
)
}
export default AppContainer;
Passing a prop would be the same as any other component.传递一个道具将与任何其他组件相同。 For example, to pass the
weather
object:例如,要传递
weather
object:
<DegreesContainer weather={weather} />
Or to pass a single value from that object:或者从该 object 传递单个值:
<DegreesContainer weather={weather.someValue} />
Be aware of course that someValue
is initially undefined
, since the object is initially {}
.当然要注意
someValue
最初是undefined
,因为 object 最初是{}
。 So the component receiving this prop would need to be able to handle that and not assume there's a value.所以接收这个道具的组件需要能够处理它而不是假设有一个值。
Alternatively, you could pass a default when it's undefined
, for example:或者,您可以在
undefined
时传递默认值,例如:
<DegreesContainer weather={weather.someValue ?? ''} />
Or let's say you want to traverse multiple properties, for example:或者假设您要遍历多个属性,例如:
<DegreesContainer weather={weather.someObj.someValue} />
This would fail on the initial render because someObj
is undefined
.这将在初始渲染时失败,因为
someObj
是undefined
。 You can conditionally check for that:您可以有条件地检查:
<DegreesContainer weather={weather.someObj ? weather.someObj.someValue : ''} />
The null checking essentially keeps going from there. null 检查基本上从那里继续进行。 Basically anywhere something might be
null
or undefined
you would need to check that before using it.基本上任何地方的东西可能是
null
或undefined
的,你需要在使用它之前检查它。
There's also the option of not even rendering the component unless data is available.除非数据可用,否则还可以选择不渲染组件。 For example:
例如:
<>
{
weather.someObj ?
<DegreesContainer weather={weather.someObj.someValue} /> :
null
}
</>
What's happening here is that the component itself is wrapped in a conditional check to see if weather.someObj
exists.这里发生的是组件本身包含在条件检查中以查看
weather.someObj
是否存在。 If it doesn't, the component itself is replaced with null
in the rendering and just doesn't render at all.如果没有,则组件本身在渲染中被替换为
null
并且根本不渲染。
(Keep in mind that a side-effect of this could be that logic within the component which only happens "on the first render", like a useEffect
with an empty dependency array, can be re-invoked because dynamically adding/removing the component like this fully un-loads and re-loads it.) (请记住,这样做的副作用可能是组件中的逻辑仅在“第一次渲染”时发生,例如具有空依赖项数组的
useEffect
,可以重新调用,因为动态添加/删除组件,例如这完全卸载并重新加载它。)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.