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

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

我不确定您在这里是否有任何问题。在this.props.cardAction中呼叫componentDidMount将继续提取卡，并且可以通过this.props.Cards使用。自然，您不会期望this.props.Card在被调用后显示。

顺便说一句，由于React会在新道具进入时重新渲染，因此您可以在render函数中立即看到它，因为数据不会以某种方式延迟。但最初，它将是undefined。

Answer 2

这是因为您正在安慰this.props.cardAction()。通过执行动作cardAction，Cards道具将仅被更新。您得到undefined是因为redux操作不会返回任何内容。当您执行动作时，状态将被更新，而状态反过来将更新组件的属性。

如何在组件上显示redux道具

2 个答案: