如何在组件上显示redux道具

Question

I have a problem to show array from actions to the component(Dashboard).

When I use this.props.Cards direct in Render I can see the array.

But when I add directly to componentDidMount I can't see just undefined .

Here you go, my code:

Dashboard.js

 import React, { Component } from 'react' import { connect } from 'react-redux' import PropTypes from 'prop-types' import Header from '../../common/Header/' import Masonry from '../../common/Masonry/' import { cardAction } from '../../store/actions/Cards' import Arrow_Down from '../../assets/img/arrow-down.svg' class Dashboard extends Component { componentDidMount() { console.log('show all cards', this.props.cardAction()) } constructor(props) { super(props) this.state = { collapsed: true, class: 'collapsed', showCards: [] } this.toggleCollapse = this.toggleCollapse.bind(this); } toggleCollapse(i) { console.log('i', i) this.setState({ collapsed: !this.state.collapsed, class: this.state.collapsed ? '' : 'collapsed', showCards: this.state.Cards }); console.log(this.state.showCards) } render() { console.log('cards', this.props.Cards) console.log('pre push-a', this.state.showCards) // this.state.showCards.push('test') // console.log('posle push-a', this.state.showCards) const cardList = this.props.Cards.map((info, i) => { return ( <div className={(info.open === 'true') ? 'collapsed' : ''} key={i}> <div className='header flex space-between'> <h2>{info.title}</h2> <span onClick={() => { this.toggleCollapse(i) }}><img src={Arrow_Down} alt='Arrow' /></span> </div> <div className='content'> <p>{info.description}</p> </div> </div> ) }) return ( <div> <Header /> <Masonry columns={3} gap={20}> {cardList} </Masonry> </div> ) } } Dashboard.defaultProps = { columns: 2, gap: 20, Cards: [] } Dashboard.propTypes = { Cards: PropTypes.array.isRequired, } const mapStateToProps = state => { return { Cards: state.cards.result } } const mapDispatchToProps = dispatch => ({ cardAction: () => dispatch(cardAction()) }) export default connect(mapStateToProps, mapDispatchToProps)(Dashboard) 

Actions --> Card.js

 const cards_array = [ { title: 'title', description: 'Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttito', open: 'true' }, { title: 'title2', description: 'Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttito Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttito', open: 'true' }, { title: 'title3', description: 'Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttito Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttito Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttito', open: 'true' }, { title: 'title', description: 'Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttito', open: 'false' }, { title: 'title2', description: 'Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttito Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttito', open: 'true' }, { title: 'title3', description: 'Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttito Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttito Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttito', open: 'true' }, { title: 'title3', description: 'Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttito Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttito Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttito', open: 'false' }, { title: 'title', description: 'Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttito', open: 'true' }, { title: 'title2', description: 'Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttito Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttito', open: 'true' } ] export const cardAction = () => dispatch => { dispatch({ type: 'FETCH_CARDS', payload: cards_array }) } 

Reducers --> Cards.js

 import { updateObject } from '../Utility' const getCards = (state, action) => { return updateObject(state, { result: action.payload }) } export default (state = {}, action) => { switch (action.type) { case 'FETCH_CARDS': return getCards(state, action) default: return state } } 

Answer 1

I'm not sure you have any problem here. Calling this.props.cardAction in componentDidMount will go ahead to fetch cards and it will be available via this.props.Cards . Naturally, you would not expect this.props.Card to show after being called.

BTW, because React re-renders when new props come in, you get to see it immediately in the render function because the data is not delayed in some way. But initially, it would be undefined .

Answer 2

This is because you are consoling this.props.cardAction() . By executing action cardAction , Cards prop will only be updated. You are getting undefined because redux action doesn't return anything. When you execute action, state will be updated which in return update the prop of component.