如何从 Reactjs 中的 useEffect 钩子访问 props

Question

我正在从新闻 API 获取数据并在完成后将其存储在我的状态中，然后将状态的值作为 props 传递给子组件。

API 返回的数据是一个对象数组。我只想将该数组的一个元素(对象)(现在处于我的状态)传递给我的子组件。因此，我通过使用数组常规遍历方法 ([]) 传递一个元素来做到这一点，但不幸的是，当我尝试在我的子组件中使用 useEffect 钩子来控制台记录 props(有效)时，我无法从钩子或组件的主体访问我的元素(对象)的属性，因为它一直告诉我它未定义，我必须取消所有订阅和 useEffect 清理函数中的异步任务。所以我尝试使用 splice 方法将该元素作为数组传递，以便使用 map 方法(有效)从子组件遍历，但是，我仍然无法从 useEffect 钩子访问属性。

父组件(主页.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

子组件(垂直.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，以便制作另一个 URL 来获取该帖子的缩略图。

Answer 1

你需要给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