REACT NATIVE REDUX Как установить массив в редукторе, полученном создателем действия

В настоящее время я пытаюсь отправить массив своему редуктору и установить его в своем состоянии, чтобы использовать его в компоненте. Он отлично работает с объектами, но я не могу понять, как это сделать с массивом.

Создатель моего действия:

export const loadUserItems = () => {
  return async function(dispatch) {
    const url_current = 'https://whateverapi';
    const response = await axios.get(url_current);
    const items = response.data.items;
    dispatch(loadItems(items));
  }
}

function loadItems(data) {
  return {
    type: LOAD_USER_ITEMS,
    payload: data
  };
}

Поэтому, если я получу один элемент в моем массиве, он будет работать отлично. Я могу установить его как объект в моем редукторе и использовать его в своем компоненте.

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

import {
  LOAD_USER_ITEMS
} from '../actions/types';

const INITIAL_STATE = {
  items: []
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case LOAD_USER_ITEMS :
      return {
        items: action.payload
      };
    default:
      return state;
  }
};

Итак, action.payload - это массив, я могу console.info, и он выводит мне массив. Этот массив содержит несколько объектов JSON.

Но когда я пытаюсь получить к нему доступ в своем компоненте, он сообщает мне, что он не определен.

import ... (no problems here)
class HomePage extends Component {
  loadUserItems() {
    this.props.loadUserItems();
  }
  constructor(props) {
    super(props);
    this.loadUserItems();
  }
  render() {
    return (
      <Container>
        <Content>
        <View style = {styles.headerViewStyle}>
          <Image
            style = {styles.headerImageStyle}
            source = {require("../assets/images/header.png")}
          />
        </View>
          <View>
            <ItemSquareDisplay description = {this.props.items[0].type}/>
          </View>
        </Content>
      </Container>
    );
  }
}
const mapStateToProps = state => {
  return {
    items: state.items.items,
  };
};
export default connect(mapStateToProps, {loadUserItems}) ( HomePage );

Мой массив содержит элементы, первый элемент. Тип - «Холодильник» ... Но он говорит мне, что this.props.items [0] .type не определен. Я сделал то же самое, но только что отправил первый элемент, и он работал нормально, я мог получить доступ к this.props.items.type. Но, похоже, это не сработает, если я отправлю весь массив.

Вам нужно еще раз, ребята! Спасибо

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
1 831
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Причина в том, что вы обращаетесь к пустому массиву.

Первоначально ваш массив элементов представляет собой пустой массив внутри редуктора. Теперь внутри вашего компонента вы вызываете действие loadUserItems, которое потребует значительного времени для получения данных и обновления хранилища redux. В течение этого периода времени выполняется метод рендеринга вашего компонента и пытается получить доступ к 1-му элементу пустого массива, что определенно выдаст ошибку.

Итак, что вы могли бы легко сделать, так это проверить, не пуст ли массив, прежде чем обращаться к его элементам.

 <ItemSquareDisplay description = {this.props.items && this.props.items.length > 0 ? this.props.items[0].type : ''} /> 

Обратите внимание, что причина для работы при использовании объекта заключается в том, что, к счастью, действие обновило хранилище redux до выполнения метода рендеринга и доступа к массиву.

Я жду свой поезд, попробуй через несколько минут.

WaLinke 22.03.2018 17:01

Хорошо, готово и работает. Большое спасибо за этого приятеля, потратить последние 4 часа, пытаясь понять это. Теперь мне нужно исправить это везде в моем коде. Знаете ли вы, что другой человек ожидает этого поведения, чтобы не проверять все объекты, которые я получаю от API?

WaLinke 22.03.2018 17:12

Фактически this.props.items используется для проверки того, определена ли переменная с именем item. Это дополнительная проверка, чтобы избежать вызова .length неопределенного массива.

csath 22.03.2018 17:15

Следует использовать неизменяемые переменные в редукторе.

Вы можете использовать slice() или concat()

В твоем случае:

case LOAD_USER_ITEMS :
      return {
        items: action.payload.slice()
      };

или если вы хотите добавлять больше предметов при каждой загрузке после

case LOAD_USER_ITEMS :
      return {
        items: state.items.concat(action.payload)
      };

убедитесь, что полезная нагрузка - это массив

Должен ли я проверять, существует ли массив элементов (см. Последний ответ) с помощью slice () в моем компоненте? Мне нужно будет добавить элементы в массив, поэтому спасибо за эти методы.

WaLinke 22.03.2018 17:20

В этом случае срез просто создаст копию массива. Его не нужно использовать в компоненте (в строке из ответа превью).

Cristian Tr 22.03.2018 17:32

Вы можете использовать просто оператор распространения. return {items: [... state.items, ... action.payload]};

csath 22.03.2018 18:06

Другие вопросы по теме