反應原生：警告：無法在未安裝的組件上執行 React state 更新

Question

我很想了解在 useEffect 中需要修復什么來修復所描述的錯誤。

這是“數據源”：

 [{"isSelect":false,
   "selectedClass":null,
   "zoneId":1026,
   "zoneName":"tomato"},
  {"isSelect":false,
   "selectedClass":null,"zoneId":1025,
   "zoneName":"apple"}]

function Button1(props) {
const [listSelectedZoneIds, setListSelectedZoneIds] = useState([]);

  useEffect(() => {
    let listSelectedZoneIds = dataSource
      .filter((zone) => zone.isSelect === true)
      .map((zone) => zone.zoneId);
    setListSelectedZoneIds(listSelectedZoneIds);
  }, [dataSource]);

  useEffect(() => {
    eventEmitter?.emit('selected', listSelectedZoneIds);
  }, [listSelectedZoneIds]);
}

Answer 1

這是因為您沒有在useEffect function 中提供清理function。 數據源中發生了一些變化，因此觸發了 useEffect，但實際上屏幕沒有聚焦，您可以使用以下代碼解決它，並從給定鏈接中閱讀有關清理 useEffect 的更多信息： https://dev .to/otamnitram/react-useeffect-cleanup-how-and-when-to-use-it-2hbm

useEffect(() => {
    let isMounted = true;

    if (isMounted) {
      (() => {
       let listSelectedZoneIds = dataSource
  .filter((zone) => zone.isSelect === true)
  .map((zone) => zone.zoneId);
setListSelectedZoneIds(listSelectedZoneIds);
      })();
    }

    return () => {
      isMounted = false;
    };
  }, [dataSource]);

第二個是：

useEffect(() => {
        let isMounted = true;

    if (isMounted) {
      (() => {
       eventEmitter?.emit('selected', listSelectedZoneIds);
      })();
    }

    return () => {
      isMounted = false;
    };
  }, [listSelectedZoneIds]);

基本上，上面的代碼將幫助您使 useEffect 僅在將屏幕安裝在堆棧中時更新屏幕，如果未安裝，則 state 在屏幕安裝在堆棧中之前不會更新。 請參閱上面的鏈接以幫助更好地了解錯誤/警告出現的原因。