'useEffect' 不只运行一次

Question

---

谢谢大家，尤其是 Mr.Drew Reese。 如果您像我一样是新手，请参阅他的答案。

---

我不知道为什么，但是当我使用useEffect控制台记录状态数据时，它总是会重新呈现，尽管状态generalInfo没有改变：/ 所以有人可以帮助我修复它并解释我的错误吗？

我想要的结果是数据将在generalInfo更改时更新。

非常感谢！

这是我的useEffect

========================问题在这里：

  const {onGetGeneralInfo, generalInfo} = props;
  const [data, setData] = useState(generalInfo);

  useEffect(() => {
    onGetGeneralInfo();
    setData(generalInfo);
  }, [generalInfo]);

=========================修复：

 useEffect(() => {
    onGetGeneralInfo();
  }, []);

  useEffect(() => {
    setData(generalInfo);
  }, [generalInfo, setData]); 

这是mapStateToProps

const mapStateToProps = state => {
  const {general} = state;
  return {
    generalInfo: general.generalInfo,
  };
};

这是mapDispatchToProps

const mapDispatchToProps = dispatch => {
  return {
    onGetGeneralInfo: bindActionCreators(getGeneralInfo, dispatch),
  };
};

这是减速机

case GET_GENERAL_INFO_SUCCESS: {
        const {payload} = action;
        return {
          ...state,
          generalInfo: payload,
        };
      }

这是行动

export function getGeneralInfo(data) {
  return {
    type: GET_GENERAL_INFO,
    payload: data,
  };
}
export function getGeneralInfoSuccess(data) {
  return {
    type: GET_GENERAL_INFO_SUCCESS,
    payload: data,
  };
}
export function getGeneralInfoFail(data) {
  return {
    type: GET_GENERAL_INFO_FAIL,
    payload: data,
  };
}

这是传奇

export function* getGeneralInfoSaga() {
  try {
    const tokenKey = yield AsyncStorage.getItem('tokenKey');
    const userId = yield AsyncStorage.getItem('userId');
    const params = {
      method: 'GET',
      headers: {
        Authorization: `Bearer ${tokenKey}`,
      },
    };

    const response = yield call(
      fetch,
      `${API_GET_GENERAL_INFO}?id=${userId}`,
      params,
    );
    const body = yield call([response, response.json]);

    if (response.status === 200) {
      yield put(getGeneralInfoSuccess(body));
    } else {
      yield put(getGeneralInfoFail());
      throw new Error(response);
    }
  } catch (error) {
    yield put(getGeneralInfoFail());
    console.log(error);
  }
}

Answer 1

redux 中的初始状态和组件中的状态是一个空数组。 所以我想从 API 获取数据。 我把它推到redux的状态。 然后我用状态它。 我想使用 useEffect 因为我想在 PUT 数据时更新状态并在更新后更新本地状态。

好的，所以我收集到您希望在组件挂载时获取数据，然后在填充时将获取的数据存储到本地状态。 为此，您需要将关注点分离到单独的效果挂钩中。 一个在组件挂载时分派一次数据获取，另一个“监听” redux 状态的变化以更新本地状态。 请注意，将传递的道具存储在本地状态中通常被认为是反模式。

const {onGetGeneralInfo, generalInfo} = props;
const [data, setData] = useState(generalInfo);

// fetch data on mount
useEffect(() => {
  onGetGeneralInfo();
}, []);

// Update local state when `generalInfo` updates.
useEffect(() => {
  setData(generalInfo);
}, [generalInfo, setData]);

Answer 2

在您的useEfect中，您正在设置generalInfo ，它会导致useEffect的依赖数组发生变化。 所以，它一遍又一遍地运行：

  useEffect(() => {
    onGetGeneralInfo();
    setData(generalInfo);
  }, [generalInfo]);

试试这个：

  useEffect(() => {
    onGetGeneralInfo();
    setData(generalInfo); // or try to remove it if it is unnecessary based on below question.
  }, []);

但是，我不明白您为什么使用setData(generalInfo); 在你之前设置过的useEffect中。 它在onGetGeneralInfo();中有变化吗？ 功能？

Answer 3

基于 React 18 的更新：

import { useEffect, useRef } from "react";

export default function Component() {
    const isRunned = useRef(false);

    useEffect(() => {
        !isRunned.current &&
            {
                /* CODE THAT SHOULD RUN ONCE */
            };

        return () => {
            isRunned.current = true;
        };
    }, []);

    return <div> content </div>;
}

Answer 4

Yow hook 拥有或使用了未在依赖项列表中列出的东西

useEffect(() => {
    onGetGeneralInfo();
    setData(generalInfo);
  }, [   onGetGeneralInfo, setData,   generalInfo]);

还要记住 useEffect 是在组件挂载之前和之后调用的，所以如果你添加一个日志，它将被打印出来