如何從 Reactjs 中的 useEffect 鈎子訪問道具

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，以便讓另一個 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