我在这里想要做的是使搜索栏具有redux状态。数据结构看起来像这样,它来自firebase。
-LHNGtHa-PgB00-Y5R8q: {
createdAt: 1531563127745
imageLinks: [
"https://cdn.pixabay.com/photo/2018/06/28/17/02/...",
"https://cdn.pixabay.com/photo/2018/06/28/17/02/...",
"https://cdn.pixabay.com/photo/2018/06/28/17/02/..."]
tag: "asdfasdf"
title: "asdfasdf"
}
我添加了currentlyDisplay: props.posts
来响应状态,props.posts来自全局redux状态。因此,当您搜索时,它会过滤掉
具有标题值
import React, { Component } from 'react';
import { connect } from 'react-redux';
import Modal from 'react-modal';
import _ from 'lodash';
import { getPosts } from '../actions/posts';
import HouseModal from '../components/HouseModal';
import SearchField from '../components/SearchFeild';
export class Houses extends Component {
constructor(props) {
super(props);
this.state = {
isOpen: null,
searchField: '',
currentlyDisplay: props.posts
}
}
componentDidMount() {
this.props.getPosts();
}
componentWillReceiveProps(nextProps) {
if (nextProps.currentlyDisplay !== this.props.currentlyDisplay) {
this.setState({ currentlyDisplay: nextProps.currentlyDisplay })
}
}
componentWillMount() {
Modal.setAppElement(document.body);
}
onClickHandle = (key) => {
this.setState({
...this.state,
isOpen: key
});
}
onSearchChange = (event) => {
let newlyDisplayed = _.filter(this.props.posts, post => post.title.includes(event.target.value))
this.setState({
searchField: event.target.value,
currentlyDisplay: newlyDisplayed
})
console.log(this.state.currentlyDisplay)
}
currentlyDisplay() {
return _.map(this.state.currentlyDisplay, (post, key) => {
<div
key={key}
className="card"
style={{ width: 18 + 'em' }}
onClick={() => this.onClickHandle(key)}
>
<img className="card-img-top" src={post.imageLinks[0]} alt="Card cap" style={{ width: 18 + 'em' }} />
<div className="card-body">
<h5 className="card-title">{post.title}</h5>
<p className="card-text">{post.tag}</p>
</div>
<HouseModal
isOpen={this.state.isOpen === key}
onClose={this.onClickHandle}
posts={this.props.posts[key]}
/>
</div>
})
}
renderPosts() {
return _.map(this.props.posts, (post, key) => {
return (
<div
key={key}
className="card"
style={{ width: 18 + 'em' }}
onClick={() => this.onClickHandle(key)}
>
<img className="card-img-top" src={post.imageLinks[0]} alt="Card cap" style={{ width: 18 + 'em' }} />
<div className="card-body">
<h5 className="card-title">{post.title}</h5>
<p className="card-text">{post.tag}</p>
</div>
<HouseModal
isOpen={this.state.isOpen === key}
onClose={this.onClickHandle}
posts={this.props.posts[key]}
/>
</div>
);
});
}
render() {
return (
<div>
<SearchField
searchChange={this.onSearchChange}>
</SearchField>
{this.state.searchField ? this.currentlyDisplay() : this.renderPosts()}
</div>
)
}
}
const mapStateToProps = (state) => {
return {
posts: state.post,
}
};
export default connect(mapStateToProps, { getPosts })(Houses);
//搜索字段
const SearchFeild =(props) => {
return (
<div className="search-feild__container">
<input
type="text"
className="search-feild"
onChange={props.searchChange}
placeholder={"search.."}
/>
</div>
)
}
我正在通过搜索从控制台获得此信息,但未在页面上呈现。我不确定这种方法是否正确。我对如何使用搜索功能处理全局redux状态感到困惑。
> (2) [{…}, {…}]
0: {createdAt: 1531563055532, imageLinks: Array(1), tag:
> "asdfasdf", title: "asdf"}
1: {createdAt: 1531563127745, imageLinks:
> Array(3), tag: "asdfasdf", title: "asdfasdf"}
答案 0 :(得分:0)
在我看来,您的问题是您没有调度动作getPosts而是仅对其进行了调用。这意味着该操作的结果不会传播到redux,并且您的组件将不会观察到更改。
从以下位置更改连接中的mapDispatchToProps对象:
export default connect(mapStateToProps, { getPosts })(Houses);
收件人:
const mapDispatchToProps = (dispatch) => ({
getPosts: () => dispatch(getPosts())
})
export default connect(mapStateToProps, mapDispatchToProps)(Houses);
然后您可以在组件中的任何位置调用它,如下所示:
const { getPosts } = this.props;
getPosts();
或
this.props.getPosts();