ошибка чтения данных с помощью redux и реагировать

Question

У меня проблема с моим кодом, я использую responseJs и redux.

моя ошибка: Ошибка типа: demo.map не является функцией

мое действие:

// DEMO
export const demoFetchRequest = () => {
  return {
    type: DEMO_FETCH_REQUEST,
  };
};
export const demoFetchSuccess = (demo) => {
  return {
    type: DEMO_FETCH_SUCCESS,
    demo,
  };
};
export const demoFetchError = (error) => {
  return {
    type: DEMO_FETCH_ERROR,
    error,
  };
};

мой редуктор:

const initialState = {
  loading: false,
  demo: [],
  error: null,
};
const demo = (state = initialState, action) => {
  switch (action.type) {
    case DEMO_FETCH_REQUEST:
      return { ...state, loading: true };
    case DEMO_FETCH_SUCCESS:
      return { ...state, loading: false, demo: action.demo };
    case DEMO_FETCH_ERROR:
      return { ...state, loading: false, error: action.error };
    default:
      return state;
  }
};

мои данные:

const demoCompletedData = [
  {
    id: 1,
    marketId: "1111-1111-1111-1111",
    title: "Autonomous car",
    picture: "https://th?id=OIP.fdvfdvfdvfdvfd&pid=Api",
    language: "English",
    flag: "??",
    completed: true,
    date: "22/01/2019 10:30",
    rate: 9.1,
    categories: {
      de: 1,
      sp: 2,
      uk: 0,
      fr: 1,
      us: 4,
    },
  },
  {
    id: 2,

мой componentDidMount:

componentDidMount() {
    this.fetchDemo();
    this.fetchUser();
  }

мой выбор впереди:

 fetchDemo() {
    this.props.demoFetchRequest();
    const { marketId } = this.props.match.params;
    axios.get(`/api/v1/passport-authenticate/market/${marketId}`)
      .then((res) => { return res.data; })
      .then(demo => this.props.demoFetchSuccess(demo))
      .catch(error => this.props.demoFetchError(error));
  }

мой возврат:

const { demo } = this.props;

мой рендер

<h5>{demo.title}</h5>
          <p>
            Demo
            {' '}
            {demo.flag}
          </p>
          {demo.map((el) => {
            return (
              <div>
                {Object.keys(el.categories).map((key) => {
                  return (
                    <p>
                      {key}
                      :
                      {el.categories[key]}
                    </p>
                  );
                })}
              </div>
            );
          })}

, и когда я изменяю Object.keys (), у меня появляется другая ошибка TypeError:невозможно преобразовать неопределенное в объект

{Object.keys(demo).map((el) => {
            return (
              <div>
                {Object.keys(el.categories).map((key) => {
                  return (
                    <p>
                      {key}
                      :
                      {el.categories[key]}
                    </p>
                  );
                })}
              </div>
            );
          })}

Вы можете мне помочь?

Answer 1

Map - это метод прототипа Array .

Код demo.map будет работать только в том случае, если demo является массивом, но в вашем коде он выглядит как объект.

Похоже, вы имели в виду, что ваш метод рендеринга немного отличается, например:

<h5>{demo.title}</h5>
          <p>
            Demo
            {' '}
            {demo.flag}
          </p>
          {demo.categories.map((el) => {
            return (
              <div>              
                    <p>                      
                      {el}
                    </p>
              </div>
            );
          })}

Я также только что заметил, что ваши категории - это объект, а не массив, поэтому часть вашегоМетод рендеринга, который работает с категориями, должен выглядеть примерно так:

{demo.categories && Object.keys(demo.categories).map((el) => {
            return (
              <div>              
                    <p>                     
                      {el.categories[key]}
                    </p>            
              </div>
            );
          })}

Есть несколько вещей, на которые следует обратить внимание:

1. Если ваши данные на самом деле представляют собой массив демонстраций,не один демонстрационный объект, тогда вам нужно отобразить этот массив демонстрационных объектов.То, как вы вызываете demo.title, похоже, указывает на то, что это может быть не так?
2. Мы проверяем, что demo.categories действительно существует.
3. Как только мы выполнили Object.keys для объекта категорийнам больше не нужны object.keys - свойства объекта категорий являются просто строками.