State как зависимость от useEffect
Я хочу вызывать useEffect() всякий раз, когда в моем файле index.js происходит изменение состояния.
index.js
export default withAuth(function Home() {
const [post, setPost] = useState([])
const getPosts = async () => {
const data = await instance.get('/post')
setPost(data.data)
}
useEffect(() => {
getPosts()
}, [])
return (
<>
<Navbar currentPage = "home" user = {getUser()} />
<div className = {styles.home}>
<div className = {styles.content}>
{
post.map((item, index) => {
return (
<PostCard key = {index} {...item} />
)
})
}
</div>
</div>
</>
)
}
)
При изменении состояния post должен вызываться метод useEffect().
Если я введу post как зависимость для useEffect(), он будет вызываться бесконечно.
Мое требование: когда пользователь создает новый пост, useEffect должен запускать и извлекать посты из базы данных.
Я имел в виду, что когда пользователь публикует новый контент, index.js следует перезагружать. Поправьте меня, если моя логика неверна. Точнее, если вы создадите новый пост в linkedin, этот пост окажется в топе. Это то, что мне было нужно
ты можешь сделать setPosts([...posts, newPost])
Ответы 2
Вы можете добавить другое состояние и переключать его каждый раз при обновлении состояния post:
const [trigger, setTrigger] = useState(true)
Теперь каждый раз, когда вы обновляете post, вы также
setTrigger(prev => !prev) // but not from useEffect
и, наконец, вы включаете trigger вместо post в зависимости useEffect
лучший подход - извлекать данные непосредственно из обработчика функции каждый раз, когда вам это нужно, и не использовать для этого useEffect, имеет больше смысла
Спасибо, приятель, мое требование: когда пользователь создает новый пост, страница index.js должна перезагружаться с новым постом.
@UnnikrishnanKJ хорошо, ты лучше знаешь свое требование ^^
На самом деле вам не нужно useEffect перезапускать в этом случае. Я считаю, что где-то должен быть обработчик, обрабатывающий создание нового сообщения. Вы вызываете call getPosts в этом обработчике при создании нового сообщения. На мой взгляд, это был бы гораздо лучший подход.
В сценарии, где вы не можете контролировать процесс создания нового сообщения, вам может потребоваться опрос для выборки сообщений через определенные промежутки времени или прослушивание события веб-сокета при создании нового сообщения.
Код для создания нового поста написан в имени компонента modalbox.js. Есть ли способ вызвать getPosts в файле index.js, когда пользователь нажимает сообщение на modalbox.js?
Ну да. Один из способов решить эту проблему — передать функцию getPosts() в качестве реквизита в modalbox.js и вызвать функцию в обработчике создания публикации. Другим способом является создание общего состояния между этими компонентами с помощью ReactContext и раскрытие потребительского хука (например, usePostContext), который также предоставляет функцию для создания и извлечения сообщений и чтения данных сообщений из общего состояния. Вы также можете использовать библиотеки состояний, такие как Redux или React-Query.
Триггеры getPosts() присваивают сообщению новое значение. Неудивительно, что если вы поместите сообщение в качестве зависимости от useEffect, это вызовет бесконечный цикл. Что вам нужно сделать, так это проверить, есть ли новый пост в базе данных. Возможно, вы можете рассмотреть возможность использования веб-сокета для уведомления пользователей о новом сообщении. Или интервал для получения сообщений на регулярной основе. Сравнивать посты с собой бессмысленно.