componentDidMount 中无法调用 props 函数答案

【问题标题】：Unable to call props functions in componentDidMountcomponentDidMount 中无法调用 props 函数
【发布时间】：2019-01-23 13:18:00
【问题描述】：

从与 mapStateToProps 和 mapDispatchToProps 连接的 Party.Container 中，向 Party 发送两个函数（fetchData 和 fetchFooter）

他们一直在工作，直到我在项目 eslint:"airbnb" 中实施，现在它不断收到这个错误“必须使用解构道具分配反应/解构分配”。

const mapActionsToProps = {
fetchData,
fetchDataFooter,};

--- 这些是函数

componentDidMount() {
  this.props.fetchData();
  this.props.fetchDataFooter(); }

这是组件

import { connect } from 'react-redux';
import { fetchData, fetchDataFooter } from './actions';

import Party from './Party';

const mapStateToProps = state => ({
  wishlist: state.wishlist,
  cart: state.cart,
});

const mapActionsToProps = {
  fetchData,
  fetchDataFooter,
};

export default connect(mapStateToProps, mapActionsToProps)(Party);
This is COntainer

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Header from '../../components/Header/Header';
import Content from './Content/Content.Container';
import styles from './Party.module.scss';
import Footer from '../../components/Footer/Footer';

const propTypes = {
  wishlist: PropTypes.shape.isRequired,
  cart: PropTypes.shape.isRequired,
  // fetchData: PropTypes.func.isRequired,
  // fetchDataFooter: PropTypes.func.isRequired,
};

class Party extends Component {
  componentDidMount() {
    // this.props.fetchData();
    // this.props.fetchDataFooter();
  }

  render() {
    const { wishlist, cart } = this.props;
    let name;
    let profilePicture;
    let personWishlist;
    let purchases;
    let id;
    if (wishlist.isFulfilled === true) {
      const listId = wishlist.payloadData.data.filter(x => x.id === 1);
      ({ name } = listId[0].name);
      ({ profilePicture } = listId[0].picture);
      ({ personWishlist } = listId[0].wishList);
      ({ purchases } = listId[0].purchases);
      ({ id } = listId[0].id);
    }
    console.log(wishlist, cart);
    return (
      <div className={styles.Party}>
        <Header />
        <Content
          name={name}
          id={id}
          profilePicture={profilePicture}
          personWishlist={personWishlist}
          purchases={purchases}
        />
        <Footer
          cart={cart}
        />
      </div>
    );
  }
}

Party.propTypes = propTypes;

export default Party;

【问题讨论】：

请向我们展示所有代码。

标签： reactjs react-redux eslint

【解决方案1】：

其实就是说你的表达式应该在使用前先解构。

例如：您正在使用：

...
this.props.fetchData();
this.props.fetchDataFooter();
...

您必须将其更改为：

const { fetchData, fetchDataFooter } = this.props;
fetchData();
fetchDataFooter();

如果您想在规则文件中禁用此功能，另一种解决方案是。

"react/destructuring-assignment": [<enabled>, 'always'] - 可以是always 或never。

更多信息请参见here。

【讨论】：

我从没想过我可以将函数保持不变。我曾经认为只有数据可以存储在常量中，而不是函数。非常感谢队友！这就是我的问题的解决方案
@BojanIštvančić 欢迎您。你可以在常量中存储很多东西，甚至 JSX :)

【解决方案2】：

您能否按照错误提示在componentDidMount 方法中尝试以下方法：

componentDidMount() {
   const { fetchData, fetchDataFooter } = this.props;
   fetchData();
   fetchDataFooter();
}

【讨论】：