javascript - 从 React Context 消费返回无法读取未定义的属性“地图”
问题描述
我正在尝试使用 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>
)
}
};
解决方案
我认为需要退货
<SearchContext.Consumer>
{value.map(result => {
return ( <div key={result._id}>
<div>
</div>
<article>
{value.postContent}
</article>
</div>
)}
)}
</SearchContext.Consumer>
推荐阅读
- url - 如何在新选项卡中从 Reporting Services 报表中打开数据库存储的 URL
- java-10 - 为什么我收到 UT005023: Exception handling request to ... : java.lang.NoSuchMethodError: ...Lorg/apache/wicket/Application;
- javascript - AngularJS Id、计数器和列表迭代
- php - 在另一个捕获中捕获一个可选组
- python - 从 TensorFlow 变量中提取值
- c# - 如何处理动态对象中带有特殊字符的字段?
- sqlite - sqlite-net-pcl 库是否支持一对多或多对多关系 - Xamarin
- python - Keras ImageDataGenerator rescale 参数如何工作?
- java - 如何为 javac 的输出着色?
- sql - SQL 中的完整性限制