Question

我正在从新闻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，以便使另一个对象获取该帖子的缩略图。

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

如何从Reactjs中的useEffect挂钩访问道具

1 个答案: