如何在Reactjs中从useEffect钩子访问属性
如何在Reactjs中从useEffect钩子访问属性
提问于 2019-05-30 05:51:22
我从一个新闻API中获取数据，并在完成时将其存储在我的状态中，然后将状态的值作为属性传递给子组件。
API返回的数据是一个对象数组。我只想将该数组(现在处于我的状态)的一个元素(对象)传递给子组件。所以，我通过使用数组常规遍历方法([])传递一个元素来做到这一点，但不幸的是，当我尝试在我的子组件中使用useEffect钩子来控制日志属性(这是有效的)时，我无法从钩子或组件的主体访问我的元素(对象)的属性，因为它一直告诉我它是未定义的，并且我必须在useEffect清理函数中取消所有订阅和异步任务。因此，我尝试使用splice方法将该元素作为数组传递，以便使用map方法从子组件中进行遍历(这很有效)，但是，我仍然无法从useEffect钩子访问属性。
父组件(Home.js)
...
const [data, setData]= useState([])
useEffect(()=>{
const fetch= async()=>{
const response= await axios(url)
const results= response.data
setData(results.articles.slice(0,5))
}
fetch()
},[url])
return(
<>
<Categories onClick={fetchCategory}/>
<section className={classes.latest}>
<Vertical postArray={data.slice(0,1)} postObject={data[0]}/>
</section>
</>
)
}
export default Home子组件(Vertical.js)
const Vertical=(props)=>{
useEffect(() => {
// console.log('postArray',props.postArray.title)
console.log('postObject',props.postObject.title)
}, )
return(
<>
{/* <article key={props.postObject.content} className={classes.article}>
<figure className={classes.article_figure}>
<img src='' alt="article alternative"/>
</figure>
<div className={classes.article_details}>
<h2>{props.postObject.title}</h2>
<p>{props.postObject.description}</p>
</div>
</article> */}
{props.postArray.map(post=>(
<article key={post.content} className={classes.article}>
<figure className={classes.article_figure}>
<img src='' alt="article alternative"/>
</figure>
<div className={classes.article_details}>
<h2>{post.title}</h2>
<p>{post.description}</p>
</div>
</article>
))}
</>
)
}
export default Vertical这样做的原因是，我需要访问传递的对象中的URL，以便让另一个对象获取该帖子的缩略图。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-05-30 06:01:06
您需要为useEffect提供依赖项，以便它进行监视和控制
useEffect(() => {
// console.log('postArray',props.postArray.title)
console.log('postObject',props.postObject.title)
},[props.postObject.title]) //this will ensure that this prop is watched for changes编辑：对于所有具有未定义错误的依赖项，您可以在依赖项中进行以下更改
useEffect(() => {
// console.log('postArray',props.postArray.title)
console.log('postObject',props?.postObject?.title) // optional-chaining would take care of the undefined check
},[props?.postObject?.title]) // optional-chaining would take care of the undefined check 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56372371
复制相关文章
相似问题
腾讯云开发者
