从 React 上下文返回中使用 无法读取未定义的属性'map'

Question

我正在尝试使用上下文在 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

我认为需要返回

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

Answer 2

上下文使用者将函数作为子函数，并将上下文值传递给该函数。你会像下面这样写

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

更新：根据您的编辑

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

请呈现搜索结果页面，例如

<Search>
<SearchResultsPage />
</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>
);
}