Мой ArticleList компонент успешно получает и отображает список статей пользователя из firestore при первой загрузке приложения. Пользователь может нажать кнопку «Удалить статью», которая успешно удаляет статью из вложенной коллекции в firestore, но вызывает ошибку при рендеринге компонента реагирования, который, похоже, все еще пытается отобразить только что удаленную статью и теперь ноль. Есть ли что-то еще, что я могу сделать, чтобы мой реагирующий компонент непрерывно слушал данные пожарного депо? Если возможно, я бы хотел оставить этот функциональный компонент и использовать хуки, а не делать его классом, но я все еще учусь, как использовать реагирующие хуки и поэтому немного борюсь.
ArticleList компонент :
const ArticleList = (props) => {
const firestore = useFirestore();
const userId = props.auth.uid;
useFirestoreConnect([
{
collection: 'users',
doc: userId,
subcollections: [{collection: 'articles'}],
storeAs: userId + '::articles'
}
]);
const myArticles = useSelector(state => state.firestore.data[`${userId}::articles`]);
const dispatch = useDispatch();
const removeArticle = useCallback(
articleId => dispatch(removeArticleFromFirebase({ firestore }, articleId)),
[firestore]
);
if (props.auth.uid) {
return(
<div>
<h3>My Articles</h3>
<p>Currently signed in: {props.auth.email}</p>
<br/>
{myArticles ? (
Object.keys(myArticles).map(articleId => {
let article = myArticles[articleId];
let articleInformation = '';
if (articleId === props.currentPaperId) {
articleInformation =
<div>
<p>{article.year}</p>
<p>{article.description}</p>
<a target="_blank" href={article.downloadUrl}><button className='waves-effect waves-light btn-small'>See article</button></a>
<button className='waves-effect waves-light btn-small' onClick={() => {removeArticle(articleId);}}>Remove from My Articles</button>
</div>;
}
let authorName = '';
if (article.author) {
authorName = ` by ${article.author}`;
}
if (article) {
return <span key={articleId}>
<li onClick={() => {dispatch(selectArticle(articleId));}}>
<em>{article.title}</em>{authorName}
</li>{articleInformation}
</span>;
} else {
return null;
}
})
) : (
<h4>No articles yet</h4>
)
}
</div>
);
} else {
return null;
}
};
const mapStateToProps = (state) => {
return {
currentPaperId: state.currentPaperId,
auth: state.firebase.auth
};
};
export default compose(connect(mapStateToProps))(ArticleList);
И действие removeArticleFromFirebase:
export const removeArticleFromFirebase = ({ firestore }, id) => {
return (dispatch, getState) => {
const userId = getState().firebase.auth.uid;
firestore
.collection('users')
.doc(userId)
.collection('articles')
.doc(id)
.delete()
.then(() => {
console.log('Deleted article from firestore: ', id);
dispatch({ type: 'REMOVE_ARTICLE', id });
})
.catch(err => {
console.log('Error: ', err);
});
};
}
Я попытался добавить useState и useEffect в ArticleList следующим образом (и попытался получить оператор возврата компонента сопоставляется через myArticlesState вместо myArticles), но безуспешно:
const [myArticlesState, setMyArticlesState] = useState(myArticles);
useEffect(() => {
setMyArticlesState(myArticles);
}, [myArticles]);
Примечание: у меня нет в настоящее время этот список статей находится в общем состоянии приложения / избыточность магазин / реквизит на всех. Это то, о чем я думал в следующий раз, но я решил сначала опубликовать свой вопрос на случай, если я смогу просто использовать хуки в этом компоненте. Никаким другим компонентам / частям приложения не требуется доступ к этому конкретному списку.
Ошибки консоли: изображение ошибки 1 изображение ошибки 2 Репозиторий Github: https://github.com/jpremmel/yarp2.0