如何在組件上顯示redux道具

Question

我有一個問題，無法顯示從動作到組件（儀表板）的數組。

當我直接在Render中使用this.props.Cards ，我可以看到該數組。

但是當我直接添加到componentDidMount我看不到undefined 。

在這里，我的代碼：

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) 

動作-> 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 }) } 

減速器-> 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

我不確定您在這里是否有任何問題。 在componentDidMount調用this.props.cardAction將繼續獲取卡，並且可以通過this.props.Cards 。 自然，您不會希望this.props.Card在被調用后顯示。

順便說一句，因為當新的道具進入時React會重新渲染，因此您可以在render函數中立即看到它，因為數據不會以某種方式延遲。 但是最初，它是undefined 。

Answer 2

這是因為您正在安慰this.props.cardAction() 。 通過執行action cardAction ， Cards cardAction只會被更新。 您將undefined因為redux操作不會返回任何內容。 當您執行動作時，狀態將被更新，這反過來會更新組件的屬性。