结合redux状态和react状态

Question

我在这里想要做的是使搜索栏具有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"}

Answer 1

在我看来，您的问题在于您没有调度动作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();