Question

有一个有趣的问题，我不知道如何解决。我在我的react应用程序中构建了一个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);

在这里，我从redux商店获取POSTS，并将其用作组件的道具。

这是我搜索某些内容时得到的结果：

我得到的错误是：

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次。

如果有帮助，我正在尝试使用语义ui react的搜索组件。 https://react.semantic-ui.com/modules/search/

如果您需要其他任何信息，请告诉我。

编辑：SearchResult组件（如果需要）：https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/modules/Search/SearchResult.js （它是通过语义预先定义的）

Answer 1

您本身并没有做错任何事情。这是语义Ui React库中的错误。看到这里：

https://github.com/Semantic-Org/Semantic-UI-React/issues/1681

https://github.com/Semantic-Org/Semantic-UI-React/issues/1141

不幸的是，您需要做一些变通的解决方法，或者忽略警告，直到/如果它们修复了磁带库。：/

如何解决我的搜索组件中的错误？ React + Firebase

1 个答案: