Автоматическое заполнение списка при запуске веб-страницы - Реакция, сокращение, Firebase

ProgramBox

Автоматическое заполнение списка при запуске веб-страницы — Реакция, сокращение, Firebase

Post author:admin
Запись опубликована:8 апреля, 2023
Post category:Вопросы по программированию

#javascript #reactjs #redux #google-cloud-firestore #react-redux

#javascript #reactjs #redux #google-облако-firestore #реакция-сокращение

Вопрос:

Я создаю веб-страницу, которая состоит из двух компонентов: одной категории и двух элементов

С помощью функции initCategories(), которую я вызываю внутри componentDidMount() категорий, я могу отображать все категории на своем экране. Функция initCategories() вызывает действие, которое отвечает за извлечение всех категорий из Firestore

Я хочу показать все элементы внутри таблицы Items, у которых есть поле категории с идентификатором первой категории в таблице Categories при запуске. Я получаю firstCategoryId в качестве реквизита с помощью метода mapStateToProps. Я пытался вызвать действие вaction.js запишите файл и передайте этот идентификатор в мой метод componentDidMount() внутри элементов, чтобы получить все элементы.

Как я могу решить эту проблему?

Обновить

Таблица категорий содержит CategoryName и CategoryID. Таблица элементов содержит ItemId, ItemName и category. Поле категории в таблице элементов сохраняет идентификатор категории, к которой принадлежит элемент

mapStateToProps()

 const mapStateToProps = state => {
  console.log("mapping called")
    return {
      items: state.itemReducer.itemsOnDisplay,
      currentCategoryId: state.reducer.currentCategoryId
    };
  }
  const mapDispatchToProps = dispatch => {
    return{
    //   onCategoryAdded: (category) => dispatch(actionCreators.addCategory(category)),
    //   onCategoryDeleted: (categoryId) => dispatch(actionCreators.deleteCategory(categoryId)),
      loadItemsInCategory: (categoryId) => dispatch(itemActionCreators.loadItemsInCategory(categoryId)),
    }
  }

componentDidMount()

 componentDidMount(){
  this.props.loadItemsInCategory(this.props.currentCategoryId)
}

1. ComponentDidMount gets called before the mapStateToProps() gets called . Это неправда, я не знаю, почему у вас сложилось такое впечатление

2. Да, вы правы. Я проверил еще раз. Я удалю эту строку из сообщения

3. Тогда я не понимаю проблему. mapStateToProps Вы переходите firstCategoryId к компоненту. Внутри componentDidMount вы вызываете initCategories() , используя firstCategoryId из реквизита

4. да. и firstCategoryId, который я передаю методу initCategories, оказывается неопределенным. В этом проблема

5. Я думаю, что вы неправильно обращаетесь к свойствам состояния. state.reducer.currentCategoryId не определено при запуске, вам необходимо ввести это значение в хранилище перед установкой самого react

Ответ №1:

Я, наконец, решил проблему. Спасибо вам всем, особенно @gbalduzzi за то, что помогли мне решить эту проблему.

Актуальная проблема, насколько я понимаю: когда хранилище создается, редуктор инициализируется значениями по умолчанию. Именно тогда componentDidMount() вызывается в первый раз. Когда загружаются значения из firebase, компоненты обновляются. На этот раз запускается метод componentDidUpdate().

 componentDidUpdate()

Решение:

Я добавил следующий код. При этом я загружаю элементы только тогда, когда компоненты обновляются значениями из firebase.

 componentDidUpdate(prevProps, prevState, snapshot) {
  if(this.props.currentCategoryId!== prevProps.currentCategoryId){
    this.props.loadItemsInCategory(this.props.currentCategoryId)
  }
}

Ответ №2:

Почему вы не используете хуки?

С компонентом без состояния, использующим хуки, вы могли бы сделать что-то вроде:

 // items.jsx
const { categoryId } = props;
const [items, setItems] useState([]);

useEffect(() => {
  fetchItemsByCategoryId(categoryId).then(items => setItems(items));
}, [categoryId])

return <ul>{items.map((item) = <li><Item item={item} /></li>)</ul>

Я предлагаю вам прочитать документы:
https://reactjs.org/docs/hooks-intro.html