在 useEffect 中使用道具時禁用 eslint 警告

Question

我正在使用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時，此組件的道具都會發生變化。

我想不出一種在不導致無限循環的情況下將道具放置在依賴數組中的方法。 在這種情況下，我使用以下方法禁用 eslint 錯誤有什么問題嗎？

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

Answer 1

出現此警告是因為您正在破壞props object。

因此，要刪除該警告，只需使用props.storeType 。

但是，如果您收到關於此的警告，只需將該道具作為依賴項並放置 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
);