Ошибка при попытке .map для реквизита в React-Redux при получении данных из Firebase

Question

Я пытался понять это, и я не знаю, что я делаю неправильно. Я настроил React-Redux для импорта / редактирования данных из Firebase. Я могу получить данные, но не могу отобразить базу данных для использования каждого элемента базы данных. Каждый предмет будет объектом с различными данными о проблеме на северной тропе страны. У него будет имя, местоположение, описание и т. Д. c ...

Я могу получить доступ к данным из Firebase. Я могу console.log массив с информацией о каждом объекте следа в нем. Я не могу заставить его отображаться на экране.

Я либо получаю error: TypeError: Cannot read property 'map' of undefined, либо ошибка об объектах недопустима как дочерний элемент React.

Ниже приведен мой соответствующий код:

action. js

 export const fetchTrailItems = () => async dispatch => {
  trailItemsRef.on("value", snapshot => {
    dispatch({
      type: FETCH_TRAILITEMS,
      payload: snapshot
    });
  });
};

Редуктор. js

  const snapshotToArray = snapshot => {
  let returnArr = [];

  snapshot.forEach(function(childSnapshot) {
    let item = childSnapshot.val();
    item.key = childSnapshot.key;

    returnArr.push(item);
  });

  return returnArr;
};

    const getTrailData = (state = [], action) => {
  switch (action.type) {
    case FETCH_TRAILITEMS:
      const newData = snapshotToArray(action.payload);
      console.log(newData);
      return { ...state, trailItems: newData };
    default:
      return state;
  }
};

    const rootReducer = combineReducers({
  form: formReducer,
  auth: authReducer,
  trailwork: trailworkReducer,
  trailData: getTrailData
});

export default rootReducer;

TrailWorkList. js

    import React from "react";
import TrailworkItem from "./TrailworkItem";
import { connect } from "react-redux";
import * as actions from "../actions";

class TrailworkList extends React.Component {
  componentDidMount() {
    this.props.fetchTrailItems();
  }

  renderTrailList = () => {
    console.log(this.props.trailData.trailItems);
    return this.props.trailData.trailItems.map(trailItem => {
      return (
        <p>{trailItem}</p>
        // <TrailworkItem trailItem={trailItem} key={this.props.trailItem.key} />
      );
    });
  };

  render() {
    return (
      <div className="ui relaxed divided list">
        Hi Im a list
        {this.renderTrailList()}
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    trailData: state.trailData
  };
};

export default connect(mapStateToProps, actions)(TrailworkList);

Я могу console.log(this.props.trailData.trailItems) и получить это: введите описание изображения здесь

Но если я пытаюсь .map над ним, я просто получаю ошибка и "undefined", и в console.log ничего не появляется, кроме "undefined". Я думаю, что я включил весь необходимый код. Если кто-то может предложить какую-либо помощь, я был бы очень признателен.

Answer 1

Необходимо проверить, есть ли у вас this.props.trailData первый.

renderTrailList = () => {
  console.log(this.props.trailData.trailItems);
  if (this.props.trailData) {
    return this.props.trailData.trailItems.map(trailItem => {
      return ( <
        p > {
          trailItem
        } < /p>
        // <TrailworkItem trailItem={trailItem} key={this.props.trailItem.key} />
      );
    });
  } else {
    return <p > Loading < /p>
  }

};