Как устранить ошибки в моем компоненте поиска?React + Firebase - PullRequest
Новая
       30

Как устранить ошибки в моем компоненте поиска?React + Firebase

0 голосов
/ 14 октября 2018

У меня интересная проблема, и я не знаю, как ее решить.Я создал компонент Search в своем приложении реагирования, которое выполняет поиск в моей базе данных Firebase в реальном времени и возвращает сообщения на основе значения поиска.

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

Не уверен, что я делаю здесь не так ...

Мой компонент: 

import React, { Component } from 'react';
import _ from 'lodash';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Search } from 'semantic-ui-react';

import { db } from '../../firebase';

class SearchSection extends Component {
    componentWillMount() {
        this.resetComponent();
    }

    componentDidMount() {
        const { onSetPosts } = this.props;

        db.onGetPosts().on('value', snapshot => onSetPosts(snapshot.val()));
    }

    resetComponent = () =>
        this.setState({ isLoading: false, results: [], value: '' });

    handleResultSelect = (e, { result }) =>
        this.setState({ value: result.createdBy });

    handleSearchChange = (e, { value }) => {
        const { posts } = this.props;

        this.setState({ isLoading: true, value });

        // eslint-disable-next-line
        setTimeout(() => {
            if (value.length < 1) return this.resetComponent();

            const re = new RegExp(_.escapeRegExp(value), 'i');
            const isMatch = result => re.test(result.createdBy);

            this.setState({
                isLoading: false,
                results: _.filter(posts, isMatch)
            });
        }, 300);
    };

    render() {
        const { isLoading, value, results } = this.state;

        const resultRenderer = ({ createdAt, createdBy, message }) => (
            <div>
                <p>{createdBy}</p>
                <p>{createdAt}</p>
                <p>{message}</p>
            </div>
        );

        resultRenderer.propTypes = {
            createdAt: PropTypes.number,
            createdBy: PropTypes.string,
            message: PropTypes.string
        };

        return (
            <Search
                loading={isLoading}
                onResultSelect={this.handleResultSelect}
                onSearchChange={_.debounce(this.handleSearchChange, 500, {
                    leading: true
                })}
                results={results}
                resultRenderer={resultRenderer}
                value={value}
            />
        );
    }
}

/* Connect the state to this component */
const mapStateToProps = state => ({
    posts: state.postState.posts
});

/* This is to store the users coming from the database to the Redux store */
const mapDispatchToProps = dispatch => ({
    onSetPosts: posts => dispatch({ type: 'POSTS_SET', posts })
});

SearchSection.propTypes = {
    onSetPosts: PropTypes.func.isRequired,
    posts: PropTypes.shape({
        createdAt: PropTypes.number,
        createdBy: PropTypes.string,
        lastModifiedAt: PropTypes.number,
        message: PropTypes.string,
        uid: PropTypes.string
    }).isRequired
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(SearchSection);

Здесь я получаюПОСТЫ от магазина приставки и использование их как опора для компонента.

Вот результаты, которые я получаю, когда что-то ищу: results

Я получаю следующие ошибки:

Warning: Failed prop type: Invalid prop 'results' supplied to 'Search'.

Warning: Failed prop type: The prop 'title' is marked as required in 'SearchResult', but its value is 'undefined'.

Warning: Each child in an array or iterator should have a unique "key" prop.

Warning: React does not recognize the 'createdAt' prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase 'createdat' instead. If you accidentally passed it from a parent component, remove it from the DOM element.

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

Если это помогает, я пытаюсь использовать компонент поиска семантического пользовательского интерфейса реакции.https://react.semantic -ui.com / modules / search /

Пожалуйста, дайте мне знать, если вам нужна какая-либо другая информация.

РЕДАКТИРОВАТЬ: компонент SearchResult, если необходимо: https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/modules/Search/SearchResult.js (предопределено семантикой)

...