Question

我正在构建一个Web客户端（react，redux）＆amp; API（mongo，express，node）将向用户显示交易列表并允许他们“喜欢/喜欢”他们。我是新来的反应/ redux，你可以告诉我。我正在使用axios来提出我的请求并成功呈现了一系列交易。我有一个“最喜欢的”按钮，成功发出了帖子请求，请求只是发回了最喜欢的交易..但是，“喜欢的数量”没有更新，并且在我手动刷新之前没有显示增加的数量页。

这是我的组件成功生成交易清单（2）

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchDeals, favoriteDeal } from '../actions';

import DealCard from './DealCard';

class DealList extends Component {
  componentDidMount(){
      this.props.fetchDeals();
      this.favoriteDeal = this.favoriteDeal.bind(this);
  }

  favoriteDeal = (dealId) => {
    this.props.favoriteDeal(dealId)
  }

  renderDeals(){
    return this.props.deals.map(deal => {
      return(
        <DealCard
          onFavorite = {this.favoriteDeal}
          key={deal._id} 
          {...deal}
        />
      )
    });
  }

  render(){
    return(
     <div>
      {this.renderDeals()}
     </div>
    );
  }
}

function mapStateToProps(state){
  return { 
    deals: state.deals,
    favoriteDeal: state.favoritedDeal
  }
}

export default connect(mapStateToProps, {fetchDeals, favoriteDeal})(DealList)

以下是我的个人交易卡：

    import React, { Component } from 'react';

class DealCard extends Component {
render() {
    return (
      <div  key={this.props._id} className="card" style={{width: "18rem", marginTop: 10}}>
          <img className="card-img-top" src={this.props.dealImage} style={{maxHeight: 200}} alt="${this.props.dealHeadline}" />
          <div className="card-body">
            <h4>{this.props.dealHeadline}</h4>
            <p className="card-text">{this.props.dealDescription}</p>
            <div>
              <button onClick={() => this.props.onFavorite(this.props._id)}>Favorite</button>
              <span>{this.props.dealId}</span>
              <i className="fa fa-heart" aria-hidden="true"></i>
              <p className="card-text">#of Likes: {this.props.dealNumberOfLikes}</p>
            </div>
          </div>
      </div>
    );
  }
}

export default DealCard;

以下是我的动作创作者：

export const fetchDeals = () => async dispatch => {
  const res = await axios.get('/api/deals')
  dispatch({type: FETCH_DEALS, payload: res.data})
};


export const favoriteDeal = (dealId) => async dispatch => {
  const res = await axios.post(`/api/deals/${dealId}/favorites`)
  dispatch({type: FAVORITE_DEAL, payload:  res.data})
};

最后我的减速机： //交易减速机

import { FETCH_DEALS } from '../actions/types';
export default function (state = [], action){
    switch(action.type){
        case FETCH_DEALS:
            return action.payload;
        default:
            return state;
    }
};

// favorite deals Reducer
import { FAVORITE_DEAL } from '../actions/types';

export default function (state = {}, action){
    switch(action.type){
        case FAVORITE_DEAL:
            return action.payload;
        default:
            return state;
    }
};

总结一下：我有一个交易列表，每个交易都有一个按钮，当点击时，“收藏”通过HTTP发布请求进行交易，并将NumberOfDealLikes增加1.当单击按钮时，请求成功执行并且数据库显示NumberOfDealLikes增加1。但是，在屏幕上，直到我手动重新渲染才会显示更新。正如推特的作品，我想表明增长同时发生。

谢谢大家的帮助！

Answer 1

我认为问题出在你的favorite_deal减速机上。正如您所说，发布请求会发回更新后的交易。然后它应该替换deals数组中的旧值。您的交易减少器应该如下：

import { FETCH_DEALS, FAVORITE_DEAL } from '../actions/types';
export default function (state = [], action){
    switch(action.type){
        case FETCH_DEALS:
            return action.payload;
        case FAVORITE_DEAL:
            return state.map((d) => d._id === action.payload._id ? action.payload : d);
        default:
            return state;
    }
};

随着交易数组的更新，您的组件将被重新渲染。而且你不需要另一台减速器。

顺便说一下，当您使用箭头函数将favoriteDeal函数定义为类属性时，您无需将其绑定到this。

动作/减速器不会像预期的那样引起重新渲染

1 个答案: