Почему не выводит данные(undefined)?

Question

[Yzurgzd]

actions/apps.js

const API_URL = "http://127.0.0.1:8000";

export const getApp = (slug) => (dispatch) => {
  const url = `${API_URL}/api/apps/${slug}/`;

  axios
    .get(url)
    .then((res) => {
      dispatch({
        type: GET_APP,
        payload: res.data,
      });
    })
    .catch((err) => console.log(err));
};

reducers/apps.js

import { GET_APPS, GET_APP } from "../actions/types.js";

const initialState = {
  app: [],
};

export default function (state = initialState, action) {
  switch (action.type) {
    case GET_APP:
      return {
        ...state,
        app: action.payload,
      };
    default:
      return state;
  }
}

Шаблон

export class Detail extends Component {
  static propTypes = {
    app: PropTypes.array.isRequired,
    getApp: PropTypes.func.isRequired,
  };

  componentDidMount() {
    this.props.getApp(this.props.match.params.slug);
  }

  render() {
    return (
      <>
         <h1>{this.props.app.title}</h1>
      </>
}
const mapStateToProps = (state) => ({
  app: state.apps.apps,
});

export default connect(mapStateToProps, { getApp })(Detail);

От бекэнда все данные получаю.

Comments

[Роман Александрович]

покажите в консоле res

Answer 1

[Павел Диденко]

У вас начальный стейт app это массив. При первом рендере вы запрашиваете у массива свойство title. После этого уже должен выполняться componentDidMount. Удалите получение title, и падать не будет

Comments

[Yzurgzd]

Не совсем понял. В componentDidMount я передаю slug для бэкенда(const url = `${API_URL}/api/apps/${slug}/`). С бэка ко мне приходит объект, у меня не получается вывести данные с этого объекта.
App у меня массив, но когда я ставлю объект - возникает ошибка "Warning: Failed prop type: Invalid prop `app` of type `array` supplied to `Detail`, expected `object`."

[Павел Диденко]

Вы пробовали учить JavaScript и пытаться разобраться в ошибках?
1) componentDidMount выполняется ПОСЛЕ первого рендера. То, что у вас в render, выполняется сразу. То есть вы пытаетесь вытащить свойство title из массива
2) Ваша ошибка это Warning из prop-types, который говорит о том, что вы ожидаете тип данных массив, а присваиваете вы туда объект.

Во первых, почему вы задаете начальное состояние как массив, если ожидаете объект? Делайте null и уберите isRequired, задав дефолтный пропс как null
Во вторых, прочитайте для начала документацию React и учебник по JavaScript