Отображение информации из хранилища Redux с помощью Array.prototype.find () вызывает ошибку

Question

Я создаю приложение, которое извлекает данные постов из API. Эти данные представляют собой массив объектов. Каждый объект имеет уникальный ключ с именем nid. Мне нужно получить правильный объект на основе nid, когда пользователь выбирает запись в блоге для чтения. Попытка использовать метод Array.prototype.find() в массиве из моего хранилища с избыточностью выдает ошибку при использовании в моем BlogDetail.js компоненте.

Я тестировал этот метод в componentDidMount(), а также в самом методе render(). Оба будут работать в некоторых случаях и в других случаях завершатся с ошибкой, без каких-либо изменений между ними. Я также зарегистрировал Array.isArray(posts), чтобы убедиться, что это действительно массив и который вернул true. Я также смог подтвердить с помощью Redux DevTools, что запись state.content.blog.posts заполняется данными во время загрузки этого компонента. Наконец, я попробовал другие методы Array в массиве posts, и они дали тот же результат.

Мой компонент BlogDetail.js:

import React, { Component } from 'react';
import { Image, View } from 'react-native';
import { connect } from 'react-redux';

export class BlogDetail extends Component {
    constructor(props) {
        super(props)
    }

    render() {
        const { navigation, posts } = this.props;
        let post = posts.find(el => el.nid === navigation.getParam("nid"));
        let BlogImage;
        if (post.large_image && post.large_image !== '') {
            BlogImage = <Image style={{ width: 500, height: 300, resizeMode: 'cover' }} source={{ uri: post.large_image }} />;
        }
        return (
            <View>
                {BlogImage}
                <View style={{ margin: 20 }}>
                    <Text>{post.title}</Text>
                    // Some logic which needs the post ...
                </View>
            </View >
        )
    }
}

const mapStateToProps = state => {
    return {
        ...state,
        posts: state.content.blog.posts
    }
}

export default connect(
    mapStateToProps
)(BlogDetail);

Пример массива state.content.blog.posts:

[
  {
    nid: 123, 
    title: "A blog post", 
    body: "The quick brown fox jumped over the lazy dog", 
    large_image: "http://something.com/image",
  }, 
  {
    nid: 234, 
    title: "Another Blog Post", 
    body: "Lorem ipsum something something", 
    large_image: "http://something.com/image2"
  }
]

Я ожидал бы, что это отфильтрует массив state.content.blog.posts и отобразит информацию для конкретного сообщения, которое мне нужно показать. Однако я получаю следующую ошибку, непоследовательно, при загрузке компонента:

TypeError: posts.find() is not a function

Answer 1

У вас есть два вопроса здесь,

Выпуск 1

const { navigation, posts } = this.props;
let post = posts.find(el => el.nid === navigation.getParam("nid")); //TypeError: posts.find() is not a function

Решение этого вопроса,

Разрушение присвоения со значениями по умолчанию подобно,

const { navigation, posts = []} = this.props;
let post = posts.find(el => el.nid === navigation.getParam("nid"));

Другое решение - проверка, содержит ли this.props данные,

const { navigation, posts } = this.props;
let post = this.props.posts ? posts.find(el => el.nid === navigation.getParam("nid")) : [];

Выпуск 2

Вы экспортируете свой компонент в двух местах,

export class BlogDetail extends Component {...}

И

export default connect(
    mapStateToProps
)(BlogDetail);

Если не нужно, удалите экспорт из объявления класса, как вы должны иметь,

class BlogDetail extends Component {...}

Answer 2

Деструктурированным значениям можно присвоить значения по умолчанию

`
const { navigation, posts = [] } = this.props; 
let post = posts.find(el => el.nid === navigation.getParam("nid")); 
if (!post) { 
    return;
} 
let BlogImage; 
`

Answer 3

Почему-то, когда функция рендеринга, называемая posts, не является массивом. Мы можем предотвратить ситуацию, добавив значение по умолчанию, например,

const { navigation, posts = [] } = this.props;

или в вашем селекторе.