Ошибка типа: this.props.messages.map не является функцией

Question

Я использую React-Redux и у меня проблемы с анализом массива.

Я использую селектор для возврата данных в компонент, но получаю ошибку TypeError: this.props.messages.map is not a function.Но если я console.log значений, он возвращает мне обычный массив.Что я делаю не так?

Метод визуализации компонентов:

render() {

    const {loading, error, messages} = this.props;
    const mes = JSON.stringify(messages);

    console.log(mes); //<------------- returns [{"key":"value"}]
return (
     <div>
       <MessageList
         messages={mes}
       />
   );
 }

Функция карты компонентов MessageList:

  {this.props.messages.map((item, i) => (
            <MessageItem
              key={i}
              message={item.message}
              }

Может быть, кто-то может сказать мне, что я делаю неправильно?

Answer 1

То, что вы можете сделать, это

render() {
const {loading, error, messages} = this.props;
return (
      <div>
         <MessageList
           messages={messages}
         />
      </div>
   );
 }

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

  {this.props.messages && this.props.messages.map((item, i) => (
        <MessageItem
          key={i}
          message={item.message}
          />
       ))}

Answer 2

В комментарии вы сказали:

messages возвращает это: Список, а не массив

JavaScript не имеет типа List, и это ясно изрезультат JSON.stringify того, что messages является массивом, или, по крайней мере, то, что JSON.stringify считает массивом.

Я думаю, что если вы посмотрите более внимательно, вы обнаружите, что messagesмассив, и вы можете просто использовать его в своем MessageList напрямую.

Если messages действительно, на самом деле не имеет map метода, вы можете преобразовать его из того, что есть в массив, используяArray.from:

mes = Array.from(messages);

... или, возможно (в зависимости от того, что это такое) спред-нотация:

mes = [...messages];

Вы, конечно, не хотите JSON.stringify, что создает строка .