在 useEffect 中使用道具时禁用 eslint 警告答案

【问题标题】：Disabling eslint warning when using props inside useEffect在 useEffect 中使用道具时禁用 eslint 警告
【发布时间】：2020-11-16 06:11:44
【问题描述】：

我正在使用useEffect 挂钩来调用动作创建者props.getStoreItems。我收到以下 eslint 错误

React Hook useEffect has a missing dependency: 'props'. 
Either include it or remove the dependency array  react-hooks/exhaustive-deps.

这是我的代码：

function GetStoreData(props) {
  useEffect(() => {
    const {storeType} = props;
    let url= null;

    if (storeType === 'episodeStore') {
      url = 'episode';
    } else if (storeType === 'characterStore') {
      url = 'character';
    };

    props.getStoreItems(url)
    // eslint-disable-line react-hooks/exhaustive-deps
    }, []); 

  return null
};

const mapStateToProps = (state) => {
  return {
    storeItems: state.storeItems
  };
};

export default connect(
  mapStateToProps,
  { getStoreItems: getStoreItems }
)(GetStoreData);

我传入的唯一道具是一个不会改变的字符串

<GetStoreData storeType='episodeStore'/>

但是，因为我使用的是 react-redux，并且 mapStateToProps 每当调用动作创建者 props.getStoreItems 时，该组件的 props 都会发生变化。

我想不出一种在不导致无限循环的情况下将道具放置在依赖数组中的方法。 在这种情况下，我使用以下方法禁用 eslint 错误是否有任何问题？

// eslint-disable-line react-hooks/exhaustive-deps

【问题讨论】：

由于缺乏上下文，可能是愚蠢的问题，但你为什么使用mapStateToProps加上useEffect而不是useSelector？（编辑：可能使用reselect 组合选择器）

标签： javascript reactjs redux react-redux eslint

【解决方案1】：

出现此警告是因为您正在破坏 props 对象。

所以要删除该警告，只需使用props.storeType。

但是，如果您收到警告，只需将该 prop 作为依赖项并放入 if 语句来检查它是否有值：

function GetStoreData(props) {
  useEffect(() => {
    if (props.storeType) {
      let url = null;

      if (props.storeType === "episodeStore") {
        url = "episode";
      } else if (props.storeType === "characterStore") {
        url = "character";
      }

      props.getStoreItems(url);
      // eslint-disable-line react-hooks/exhaustive-deps
    }
  }, [props.storeType]);

  return null;
}

const mapStateToProps = (state) => {
  return {
    storeItems: state.storeItems,
  };
};

export default connect(mapStateToProps, { getStoreItems: getStoreItems })(
  GetStoreData
);

【讨论】：