javascript - 如何在组件上显示 redux 道具

问题描述

我在显示从动作到组件（仪表板）的数组时遇到问题。

当我this.props.Cards在 Render 中使用直接时，我可以看到数组。

但是当我直接添加到时，componentDidMount我看不到undefined.

给你，我的代码：

仪表板.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
  }
}

标签： javascripthtmlreactjs

javascript - 如何在组件上显示 redux 道具

问题描述

解决方案

推荐阅读