Вызов функции один раз при загрузке страницы

Question

У меня есть 3 useEffect функции, каждая из которых вызывает функцию updateData. (Каждый делает что-то еще в дополнение к этому, поэтому я не могу объединить их все.) Из-за этого при загрузке страницы updateData вызывается 3 раза.

Вот соответствующий код:

useEffect(() => {
    ...
    updateData();
}, [changePage]);

useEffect(() => {
    ...
    updateData();
}, [search]);

useEffect(() => {
    ...
    updateData();
}, [sortBy]);

Как я могу убедиться, что updateData вызывается только один раз при загрузке страницы?

Answer 1

Что я могу предложить вам использовать еще useEffect с useState. Что мне нужно проверить, так это то, что если государственная опора правдива, то все должно работать. Чтобы ограничить это, я бы использовал условие if, чтобы проверить, является ли значение этого состояния истинным, а затем выполнить его, в противном случае - нет.

Я думаю:

const [isLoaded, setIsLoaded] = useState(false);
useEffect(() => {
  if (isLoaded && changePage) {
    updateData(); // <---wont run as isLoaded is false at first load
    setIsLoaded(false);
  }
}, [changePage]);

useEffect(() => {
  if (isLoaded && search) {
    updateData();// <---wont run as isLoaded is false at first load
    setIsLoaded(false);
  }
}, [search]);

useEffect(() => {
  if (isLoaded && sortBy) {
    updateData();// <---wont run as isLoaded is false at first load
    setIsLoaded(false);
  }
}, [sortBy]);

useEffect(() => {
  setIsLoaded(true); // <---sets the isLoaded to true for further observations
  if(isLoaded){
     updateData(); // <----calls the updateData once.
  }
}, []);

Примечание: - Порядок важен .

Answer 2

Добавить состояние монтирования

Я думаю, что это будет работать. Но мне это кажется грязным. Также, возможно, состояние объединяется, и вы можете получить от этого дополнительные триггеры. Поэтому, пожалуйста, проверьте это с вашей настройкой.

const [isMountRender, setMountRender] = useState(true);

useEffect(() => {
    ...
    if (isMountRender) return;
    updateData();
}, [changePage]);

useEffect(() => {
    ...
    if (isMountRender) return;
    updateData();
}, [search]);

useEffect(() => {
    ...
    if (isMountRender) return;
    updateData();
}, [sortBy]);

useEffect(() => {
    setMountRender(false)
    updateData();
}, []);