javascript - 结合 redux 状态和反应状态
问题描述
我在这里要做的是制作一个带有 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"}
解决方案
在我看来,您的问题在于您没有发送操作 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();
推荐阅读
- ruby-on-rails - 用于连接表的 Rails 查询
- asp.net - 在没有 OpenID Connect 和 Razor 页面的情况下使用 ASP.NET 5.0 存储用户数据
- php - Packagist 包 - 无法针对 GitHub 更新/同步
- javascript - 从循环中的值创建数组
- flutter - 使用同步融合颤振日期选择器的垂直选择器
- google-bigquery - 即使启用了流式导出,Firebase Analytics 也不会将事件表导出到 Bigquery
- reactjs - 如何将组件添加到可重用组件中?反应
- mysql - 如何在 Docker 容器中设置“spring.datasource.url”
- java - 如何实现将结果返回到事件调度线程的方法?
- powershell - Powershell - 显示作为管理员组成员的 ACTIVE 用户