Question

我有一个组件'帖子'的初始状态

内部减速器如下：

import {FETCH_POSTS, NEW_POST, ASSISTANT_MANAGER, BARTENDER, OPEN_MODAL} from '../actions/types'

const initialState = {
    items: [],
    item: {},
    showComponent: false,
    selectedJob: {}

}

减速器/ index.js

import {combineReducers} from 'redux';
import postReducer from './postReducer'
export default combineReducers({
    posts: postReducer,
})

/组件/帖子

class Posts extends Component {
  constructor(){
    super();
    this.state = {
      selectedJob: ""
    };

  }

  _onButtonClick(selected_post, e) {

    this.setState({
      selectedJob:selected_post,
      showComponent:true

    });
    console.log('my current props', this.props)



  }
  componentWillMount(){
    this.props.fetchPosts();
  }




  render() {
    const keys = generateKey(new Date().getTime())
    var dictionary = this.props.posts
    const postItemsArr = Object.keys(dictionary).map(post=>dictionary[post])
    const number = 0
    const postItems = postItemsArr.map(
    post=>(

           <Jumbotron  key={generateKey(post.positiontitle) + generateKey(post.businessId)} >
             <div className="position">{post.positiontitle}</div>
             <br></br>
             <BusinessName businessnameType={post.businessname} />

             <br></br>

             <JobDescription jobDescription={post.description_sanitized} />
             <br></br>


             <Button onClick={this._onButtonClick.bind(this, post)}>DETAILS</Button>

           </Jumbotron> 


      ))
    return (
      <div>
        <h1> Jobs Listings </h1>

        {postItems }
        {this.props.showComponent ? <ModalComponent selectedJob={this.state.selectedJob}/>: null}

      </div>
    );
  }
}


Posts.propTypes = {
  fetchPosts: PropTypes.func.isRequired,
  posts: PropTypes.array.isRequired,
  newPost:PropTypes.objects,


}

const mapStateToProps = state => (

{

  posts: state.posts.items,
  newPost: state.posts.item,
  showComponent: state.posts.showComponent

});


export default connect(mapStateToProps, {fetchPosts})(Posts);

我要做的是_onButtonClick（selected_post，e）{ 我想在这里设置道具，将showComponent设置为True。 }

当我使用this.props.showComponent（true）时，它表示未定义.showComponent。

在我的动作文件中我有showComponent动作，它应该调度道具但不按预期进行。

./actions/postActions
import {FETCH_POSTS, NEW_POST, OPEN_MODAL} from './types';

export const showComponent = () => dispatch => {
    dispatch({
        type:OPEN_MODAL,
        payload:false
    })
}
export const fetchPosts = () => dispatch => {
fetch('http://127.0.0.1:8000/?filters')
  .then(res=>res.json())
  .then(posts => dispatch({
    type:FETCH_POSTS,
    payload:posts.results,
}))

}

总而言之，如何在不必使用导出连接的情况下向Reducer发送操作，就像我为fetchPosts所做的那样

React .props未定义

0 个答案: