如何在组件上显示 redux 道具

Question

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

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

但是当我直接添加到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)

操作 -->卡.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
  })
}

减速器-->卡.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 会在新道具出现时重新渲染，所以您可以立即在渲染函数中看到它，因为数据不会以某种方式延迟。但最初，它会undefined.

Answer 2

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