Javascript 结合redux状态和react状态

我在这里要做的是用redux state创建一个搜索栏。数据结构看起来像这样，它来自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);

---

在我看来，您的问题在于您没有发送操作getPosts，只是调用它。这意味着该操作的结果不会传播到redux，并且您的组件不会观察到这些更改

将连接中的mapDispatchToProps对象更改为：

export default connect(mapStateToProps, { getPosts })(Houses);

致：

然后，您可以在组件中的任意位置调用它，如下所示：

const { getPosts } = this.props;
getPosts();

或

---

您是否在渲染函数中尝试了

searchChange={（e）=>this.onSearchChange（e）}

？@faebzz感谢您的评论。这对我没用！谢谢你的回复。我在creator文件中使用了此代码。export const getPosts=（）=>（dispatch）=>{reference.on（'value'，（snapshot）=>{dispatch（{type:'FETCH_POSTS'，payload:snapshot.val（），}）；}；然后，您可能只需要将我的示例中的getPosts:（）=>dispatch（getPosts（））更改为getPosts:dispatch（getPosts（）），因为您已经在操作创建者中执行了操作。

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();