Как получить доступ к реквизиту из ловушки useEffect в Reactjs

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