componentdidUpdate中的调用操作

Question

我正在尝试在componentdidUpdate中更新状态，因此要调用函数，但是控制台显示其类型错误Uncaught (in promise) TypeError: this.props.updateMarketCap is not a function

我已将该函数导入我的文件中。下面是示例：

import { fetchMarketCap } from '../Actions/Marketcap';
import { updateMarketCap } from '../Actions/Marketcap';
componentDidMount(){
    // setInterval(this.props.fetchMarketCap(), 3000);
    this.props.fetchMarketCap();
    this.interval = setInterval(() => {
      this.props.fetchMarketCap();
    }, 20000);
}
componentDidUpdate(prevProps, prevState){
    const prev = prevProps.marketcap.map((coin, i) => (
       <tr key={this.props.marketcap[i].CoinInfo.Id}>
            <td className="crypt-up"><b>{this.props.marketcap[i].DISPLAY.USD.MKTCAP}</b></td>
            <td className={coin.DISPLAY.USD.PRICE < this.props.marketcap[i].DISPLAY.USD.PRICE ? 'crypt-up' : (coin.DISPLAY.USD.PRICE > this.props.marketcap[i].DISPLAY.USD.PRICE ? 'crypt-down' : 'equal')}>{this.props.marketcap[i].DISPLAY.USD.PRICE}>{this.props.marketcap[i].DISPLAY.USD.PRICE}</td>
        </tr>
    ));

    this.props.updateMarketCap(prev);
}

在文件末尾：

const mapStateToProps = state => ({
   marketcap: state.marketcap.coins
});
export default connect ( mapStateToProps, { fetchMarketCap } )(Marketcap);

动作函数是

export const updateMarketCap = (newData) => dispatch => {
   dispatch({
      type: UPDATE_MARKET_CAP,
      payload: newData
   })
}

我已经正确导入了动作类型和其他内容

Answer 1

您需要让componentDidUpdate返回true或false，因此在您的情况下可能类似。我假设您在此页面上有一个mapDispatchToProps吗？

componentDidUpdate（prevProps，prevState）{

if(prevProps!==prevState){
let marketCap
marketCap = (
 const prev = prevProps.marketcap.map((coin, i) => (
   <tr key={this.props.marketcap[i].CoinInfo.Id}>
        <td className="crypt-up"><b>{this.props.marketcap[i].DISPLAY.USD.MKTCAP}</b></td>
        <td className={coin.DISPLAY.USD.PRICE < this.props.marketcap[i].DISPLAY.USD.PRICE ? 'crypt-up' : (coin.DISPLAY.USD.PRICE > this.props.marketcap[i].DISPLAY.USD.PRICE ? 'crypt-down' : 'equal')}>{this.props.marketcap[i].DISPLAY.USD.PRICE}>{this.props.marketcap[i].DISPLAY.USD.PRICE}</td>
    </tr>
));
}

this.props.updateMarketCap(prev);
}

）

然后在您的return语句中将{marketCap}放在所需的位置

Answer 2

我认为连接功能一定是错误的。 mapDispatchToProps的定义不正确，这是将导入的动作与您要调用的道具连接的导线。

mapDispatchToProps = {
    fetchMarketCap ,
    updateMarketCap 
};