Question

尝试将Redux数组添加到组件状态时遇到问题：

componentDidMount() {
  this.props.cardAction()
  this.setState({ showCards: this.props.cardAction() })
}

hhhhhh undefined控制台日志未定义

这是我的仪表板代码：

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() {
    this.props.cardAction()
    this.setState({ showCards: this.props.cardAction() })
  }
  constructor(props) {
    super(props)
    this.state = {
      collapsed: true,
      class: 'collapsed',
      showCards: {},
    }
    this.toggleCollapse = this.toggleCollapse.bind(this);
  }

  toggleCollapse(i, info) {
    console.log('i', info, 'iiiii', i)
    this.setState({
      collapsed: !this.state.collapsed,
      class: this.state.collapsed ? '' : 'collapsed',
      showCards: info
    }, () => {
      // my state is updated here !


      console.log('cardsss', this.state.showCards)
    })
    if (this.state.showCards === 'active') {
      let carddd = this.state.showCards
      this.setState({
        showCards: {
          ...this.state.showCards,
          open: 'inactive'
        }
      });
    }
    else {
      this.setState({
        showCards: {
          ...this.state.showCards,
          open: 'active'
        }
      });
    }
  }

  render() {
    console.log('hhhhhh', this.state.showCards)
    const cardList = this.props.Cards.map((info, i) => {
      return (
        <div className={(info.open === 'active') ? 'collapsed' : ''} key={i}>
          <div className={(info.open === 'active') ? 'header flex space-between active' : 'header flex space-between'}>
            <h2>{info.title}</h2>
            <span onClick={() => { this.toggleCollapse(i, info) }}><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)

Answer 1

this.props.cardAction()是一个redux动作，它并不意味着您直接分配给state，原因是redux动作将返回到reducer，而不是component。您应该在setState

中删除componentDidMount

componentDidMount() {
    this.props.cardAction();
  }

当您调用this.props.cardAction()时，它将调用redux操作文件中定义的函数，结果将如上所述在this.props.Cards上可用

const mapStateToProps = state => {
  return { Cards: state.cards.result }
}

如何添加道具

1 个答案: