如何从Reactjs中的useEffect挂钩访问道具 [英] How to access props from useEffect hook in Reactjs

问题描述

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

I am fetching data from a news API and storing it in my state upon completion, then also passing the value of the state as props to a child component.

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

The data returned by the API is an array of objects. I only want to pass one element (object) of that array(which is now in my state) to my child component. So, I did just that by using the arrays conventional traversal method ([]) to pass one element, but unfortunately, when I tried using the useEffect hook in my child component to console log the props (which worked ), I was unable to access the properties of my element (object) from neither the hook nor from the body of the component as it kept on telling me that its undefined and that I have to cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. So I tried passing that one element as an array using the splice method in order to be traversed from the child component using the map method (which worked), however, I was still unable to access the properties from the useEffect hook.

父组件(Home.js)

Parent Component (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)

Child component (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，以便创建另一个URL来获取该帖子的缩略图.

The reason for this is that I need to access an URL which is inside the passed object in order to make another to fetch the thumbnail for that post.

推荐答案

您需要为useEffect提供依赖项，以便其监视和控制

you need to give dependencies to the useEffect, for it to watch and console

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

这篇关于如何从Reactjs中的useEffect挂钩访问道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！