从 React Context 消费返回无法读取未定义的属性“地图”

Question

我正在尝试使用 Context 在 React 中的两个组件之间传递数据。 我要传递的数据是一个数组searchResults 。 我已经设置了上下文和所有内容，但是当我尝试在我的第二个组件中使用该数组时，我得到Cannot read property 'map' of undefined ，如何在我通过上下文发送的第二个组件中使用该数组？

这是我的第一个组件：

import React, { Component } from "react";
import axios from "axios";
export const SearchContext = React.createContext();

class Search extends Component {
    state = {
        searchResults: [],
        isSearched: false
    }


    getSearchQuery = (event) => {
        const queryString = document.querySelector(
            ".search-input"
        ).value;

        if (event.keyCode === 13) {
            axios.post("http://localhost:3001/search", {
                queryString: queryString,


            }).then(response => {

                this.setState({ ...this.state, searchResults: response.data });

            });
            this.setState({ ...this.state, isSearched: true });
            window.location.href = '/blog/searchResults'
        }
    };

    render() {
        console.log(this.state.searchResults)
        return (
            <SearchContext.Provider value={this.state.searchResults}>
                <input
                    type="text"
                    className="search-input"
                    onKeyDown={(e) => this.getSearchQuery(e)}
                />
            </SearchContext.Provider>

        );
    }
}

export default Search;

和我应该使用数组的第二个组件：

import React, { Component } from 'react';
import Footer from '../Footer/Footer.jsx';
import CustomHeader from '../CustomHeader/CustomHeader.jsx';
import { SearchContext } from '../../components/Search/Search.jsx';
let title = 'Blog'

class SearchResultsPage extends Component {
    render() {
        return (
            <div>
                <CustomHeader
                    title={title}
                />

               <SearchContext.Consumer>
                {(value) => value.map(result => (
                    <div key={result._id}>
                        <div>
                        </div>
                        <article>
                            {value.postContent}
                        </article>
                    </div>
                  )
                )}
            </SearchContext.Consumer>
                <Footer />
            </div>
        )
    }
};

Answer 1

上下文使用者将 function 作为其传递上下文值的子项。 你会像下面这样写

<SearchContext.Consumer>
                {(value) => value.map(result => (
                    <div key={result._id}>
                        <div>
                        </div>
                        <article>
                            {value.postContent}
                        </article>
                    </div>
                  )
                )}
            </SearchContext.Consumer>

更新：根据您的编辑

您的 SearchResultsPage 不会呈现为 Search 组件的子组件，并且要使上下文使用者正常工作，它需要层次结构中的上下文提供程序。

请像这样呈现 SearchResults 页面

<Search>
    <SearchResultsPage />
</Search>

并且在 Search 组件中，您将不得不使用和渲染子组件

render() {
    console.log(this.state.searchResults)
    return (
        <SearchContext.Provider value={this.state.searchResults}>
            <input
                type="text"
                className="search-input"
                onKeyDown={(e) => this.getSearchQuery(e)}
            />
            {this.props.children}
        </SearchContext.Provider>

    );
}

Answer 2

我认为需要退货

<SearchContext.Consumer>
                    {value.map(result => {
                    return (    <div key={result._id}>
                            <div>
                            </div>
                            <article>
                                {value.postContent}
                            </article>
                        </div>

                    )}
                    )}
                </SearchContext.Consumer>