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

Question

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

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，以便让另一个对象获取该 post 的缩略图。

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

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

How to access props from useEffect hook in Reactjs

javascript

arrays

traversal

reactjs

react-hooks