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

Posted 2023-02-22

【中文标题】如何从 Reactjs 中的 useEffect 挂钩访问道具

【英文标题】：How to access props from useEffect hook in Reactjs

【发布时间】：2019-10-15 18:18:20

【问题描述】：

我正在从新闻 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='' />
        </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='' />
        </figure>
        <div className=classes.article_details>
            <h2>post.title</h2>
            <p>post.description</p>

        </div>
    </article>
    ))
    </>
)


export default Vertical

这样做的原因是我需要访问传递对象内部的 URL，以便让另一个 URL 获取该帖子的缩略图。

【参考方案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 

【讨论】：

不错！这解决了性能问题，但我仍然因为试图从钩子访问属性而变得不确定。

你在哪里得到undefined，第一次你会得到undefined，但是从api返回数据的那一刻，你应该不再得到undefined]

当我尝试从 useEffect 挂钩访问任何属性时，我得到未定义，就像 props.postObject.title 一样。

哦，我现在明白了一点。子组件渲染到屏幕时，我的 API 请求可能无法完全解决，对吧？

对我来说效果很好，为什么还没有标记为答案