Почему state работает не так как я ожидал?

@samiroutka · Регистрация: 26.03.2023

Author24 — интернет-сервис помощи студентам

Вот мой observer

Javascript

  let observer = new IntersectionObserver(entries => {
    if (entries[0].isIntersecting){
      setCurrentPage(currentPage + 1)
      console.log(currentPage)
    }
  }, {})

Я хочу чтобы при вызове observer, currentPage менялось на 1, но почему-то это происходит только один раз. При последующих отрабатываниях, currentPage не увеличивается больше 2. Знаю что можно использовать функцию в setCurrentPage, но тогда актуальное значение переменной видно только в функции setCurrentPage, а мне нужно чтобы актуальное значение currentPage было доступно на всех уровнях. Помогите мне пожалуйста, не могу понять как это решить

@mr_dramm · 07.07.2023, 23:02

попробуйте так

Javascript

1	setCurrentPage(currentPage => currentPage + 1)

и этот код

Javascript

1	console.log(currentPage),

покажет изменение только со следующей отрисовкой

Но лучше покажите весь код компонента, мне кажется будут еще рекомендации

@samiroutka · 08.07.2023, 10:07 **[ТС]**

Вот весь компонент

Javascript

import React, {useState, useEffect, useRef} from 'react'
import styles from './Posts.module.css'
import {getAmountOfPages, getServerData} from '../../components/utils.js'
import {allDataContext} from '../../components/contexts.js'
// ----------
import Post_form from '../../components/Post_form/Post_form.jsx'
import Post_filter from '../../components/Post_filter/Post_filter.jsx'
import Post_search from '../../components/Post_search/Post_search.jsx'
import Post_list from '../../components/Post_list/Post_list.jsx'
import Submit_button from '../../components/UI/Submit_button/Submit_button'
import Post_counter from '../../components/Post_counter/Post_counter'
import Loader from '../../components/UI/Loader/Loader.jsx'
import Pagination from '../../components/UI/Pagination/Pagination.jsx'
 
 
// ------------------------------
function Posts() {
 
  let [data, setData] = useState('')
  let [searchData, setSearchData] = useState('')
 
  let [hiddenState, setHiddenState] = useState(true)
  let [loading, setLoading] = useState(false)
  let isEternalPosts = true
 
  let mainLimit = 10
  let amountOfButtons = getAmountOfPages(100, mainLimit)
  let [currentPage, setCurrentPage] = useState(1)
 
  let setServerData = async (page) => {
    setLoading(true)
    setData(await getServerData(mainLimit, page))
    setLoading(false)
  }
 
  useEffect(() => {
    setServerData()
  }, [])
 
  let observerPoint = useRef()
 
  let observer = new IntersectionObserver(entries => {
    if (entries[0].isIntersecting){
      setCurrentPage(currentPage  => currentPage + 1)
      console.log(currentPage)
    }
  }, {})
 
  useEffect(() => {
    observer.observe(observerPoint.current)
  }, [data])
 
  // --------------------
  return (
    <allDataContext.Provider value={{data, setData, searchData, setSearchData}}>
      <div className="App">
        <Submit_button onClick={() => setHiddenState(false)} style={{marginTop: '2%'}}>Добавить пост</Submit_button>
        <Post_form hidden={hiddenState} setHiddenState={setHiddenState}/>
 
        <br/>
        <hr/>
 
        <h1 className={styles.title}>Посты</h1>
        <div className={styles.box}>
          <Post_search/>
          <Post_filter options={[
            {name: 'По названию', value: 'title',},
            {name: 'По описанию', value: 'description',},
          ]}/>
          <Post_counter>{data.length}</Post_counter>
        </div>
 
        {loading
        ? 
          <Loader/>
        : 
          <>
            <Post_list ref={observerPoint}/>
          </>
        }
        {isEternalPosts
        ?
          <></>
        :
          <Pagination amountOfButtons={amountOfButtons} currentPage={currentPage} setCurrentPage={setCurrentPage} setServerData={setServerData} limit={mainLimit}/>
        }
      </div>
    </allDataContext.Provider>
  )
}
 
export default Posts

Используя функцию таким образом

Javascript

1	setCurrentPage(currentPage => currentPage + 1)

ничего не поменялось

-----------------------------------------

Я ещё пробовал сделать так:

Javascript

  let actualCurrentPage = 0
 
  useEffect(() => {
    console.log(actualCurrentPage)
  }, [actualCurrentPage])
 
  let observer = new IntersectionObserver(entries => {
    if (entries[0].isIntersecting){
      setCurrentPage(actualValue  => {
        actualCurrentPage = actualValue + 1
        return actualValue + 1
      })
    }
  }, {})

но почему-то useEffect вообще не реагирует на изменение переменной

@mr_dramm · 08.07.2023, 13:30

Немного накодил, смысл в том что нужно следить за тем чтобы ты работал с одним и тем же обсервером, который не будет пересоздаваться каждую перерисовку

intersectionobserver example

App.tsx

Javascript

import "./styles.css";
import React from "react";
import useIntersectionObs from "./useIntersectionObs";
 
export default function App() {
  const main = React.useRef<HTMLDivElement>();
  const target = React.useRef<HTMLDivElement>();
  const { addTarget, isIntersect, setRoot } = useIntersectionObs();
  const [counter, setCounter] = React.useState(0);
  React.useEffect(() => {
    if (isIntersect) {
      setCounter((prev) => prev + 1);
    }
  }, [isIntersect]);
  return (
    <>
      <div
        id="main"
        ref={(element) => {
          if (element && !main.current) {
            setRoot(element);
            main.current = element;
          }
        }}
      >
        <p>scroll to see the target</p>
        <div className="buffer"></div>
        <div
          id="target"
          ref={(element) => {
            if (element && !target.current) {
              addTarget(element);
              target.current = element;
            }
          }}
        ></div>
        <div className="buffer"></div>
      </div>
      <div id="output">counter: {counter}</div>
    </>
  );
}

useIntersectionObs.tsx

Javascript

import React from "react";
const io_options = {
  root: null,
  rootMargin: "0px",
  threshold: 0.5
};
 
const useIntersectionObs = () => {
  const [isIntersect, setIntersect] = React.useState(false);
  const [root, setRootElement] = React.useState<Element | null>(null);
  // элементы которые мы хотим добавить в обсервер, но обсервер еще не готов их принять
  const elements = React.useRef<Element[]>([]);
  // Для исключения повторной инициализации
  const ioRef = React.useRef<IntersectionObserver>();
  const io_callback = React.useCallback(
    (entries: IntersectionObserverEntry[]) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          setIntersect(true);
        } else {
          setIntersect(false);
        }
      });
    },
    []
  );
  const io_observer = React.useMemo(() => {
    if (root === null || ioRef.current) return ioRef.current;
    const io = new IntersectionObserver(io_callback, io_options);
    ioRef.current = io;
    for (const element of elements.current) {
      io.observe(element);
    }
    elements.current = [];
    return io;
  }, [io_callback, root]);
  const addTarget = React.useCallback(
    (target: Element) => {
      if (io_observer) {
        io_observer?.observe(target);
      } else {
        elements.current.push(target);
      }
    },
    [io_observer]
  );
  const setRoot = React.useCallback((element: Element) => {
    if (element instanceof Element === false) return;
    setRootElement((prevElement) => (!prevElement ? element : prevElement));
  }, []);
  return { addTarget, isIntersect, setRoot };
};
 
export default useIntersectionObs;

@samiroutka · 08.07.2023, 15:45 **[ТС]**

Мне кажется можно более лаконично и с меньшим количеством кода решить эту проблему

Добавлено через 33 минуты
Я сейчас сидела, и хоть какое-то корявое решение у меня получилось после того, как я импортировал 'react-intersection-observer'. Вот код:

Javascript

let {ref, inView} = useInView({})  
 
  useEffect(() => {
    if (inView && isEternalPosts && currentPage < 11){     
      if (currentPage == 1){
        setCurrentPage(currentPage+2)
        updateData(currentPage+1)
      } else {
        setCurrentPage(currentPage+1)
        updateData(currentPage)
      }
    }
  }, [inView])

Если знаете, как сделать ещё проще, то пожалуйста напишите

Весь компонент:

Javascript

import React, {useState, useEffect, useRef, useLayoutEffect} from 'react'
import { useInView } from 'react-intersection-observer'
import styles from './Posts.module.css'
import {getAmountOfPages, getServerData} from '../../components/utils.js'
import {allDataContext} from '../../components/contexts.js'
// ----------
import Post_form from '../../components/Post_form/Post_form.jsx'
import Post_filter from '../../components/Post_filter/Post_filter.jsx'
import Post_search from '../../components/Post_search/Post_search.jsx'
import Post_list from '../../components/Post_list/Post_list.jsx'
import Submit_button from '../../components/UI/Submit_button/Submit_button'
import Post_counter from '../../components/Post_counter/Post_counter'
import Loader from '../../components/UI/Loader/Loader.jsx'
import Pagination from '../../components/UI/Pagination/Pagination.jsx'
 
 
// ------------------------------
function Posts() {
 
  let [data, setData] = useState('')
  let [searchData, setSearchData] = useState('')
 
  let [hiddenState, setHiddenState] = useState(true)
  let [loading, setLoading] = useState(false)
  let isEternalPosts = false
 
  let mainLimit = 10
  let amountOfButtons = getAmountOfPages(100, mainLimit)
  let [currentPage, setCurrentPage] = useState(1)
  let actualPage = 1
 
  let setServerData = async (page) => {
    setLoading(true)
    setData(await getServerData(mainLimit, page))
    setLoading(false)
  }
 
  let updateData = async (page) => {
    setData([...data, ...await getServerData(mainLimit, page)])
  }
 
  useEffect(() => {
    setServerData()
  }, [])
 
  let {ref, inView} = useInView({})  
 
  useEffect(() => {
    if (inView && isEternalPosts && currentPage < 11){     
      if (currentPage == 1){
        setCurrentPage(currentPage+2)
        updateData(currentPage+1)
      } else {
        setCurrentPage(currentPage+1)
        updateData(currentPage)
      }
    }
  }, [inView])
 
  // --------------------
  return (
    <allDataContext.Provider value={{data, setData, searchData, setSearchData}}>
      <div className="App">
        <Submit_button onClick={() => setHiddenState(false)} style={{marginTop: '2%'}}>Добавить пост</Submit_button>
        <Post_form hidden={hiddenState} setHiddenState={setHiddenState}/>
 
        <br/>
        <hr/>
 
        <h1 className={styles.title}>Посты</h1>
        <div className={styles.box}>
          <Post_search/>
          <Post_filter options={[
            {name: 'По названию', value: 'title',},
            {name: 'По описанию', value: 'description',},
          ]}/>
          <Post_counter>{data.length}</Post_counter>
        </div>
 
        {loading
        ? 
          <Loader/>
        : 
          <>
            <Post_list/>
            <div style={{width: '100%', height: '10px'}} ref={ref}></div>
          </>
        }
        {isEternalPosts
        ?
          <></>
        :
          <Pagination amountOfButtons={amountOfButtons} currentPage={currentPage} setCurrentPage={setCurrentPage} setServerData={setServerData} limit={mainLimit}/>
        }
      </div>
    </allDataContext.Provider>
  )
}
 
export default Posts

@mr_dramm · 08.07.2023, 15:46

с одной стороны лаконично с точки зрения написания кода, с другой в бандл добавится весь код библиотеки "react-intersection-observer" хотя это может быть и не критично для Вашего проекта. Главное чтобы Вас все устраивало

@samiroutka · 08.07.2023, 17:56 **[ТС]**

???

Добавлено через 2 часа 3 минуты
Я просто не понимаю как работает useState, с библиотекой react-intersection state обновляется быстро, а без библиотеке state обновляется только после рендеринга. Не понимаю как это работает

@mr_dramm · 08.07.2023, 21:33

Сообщение от samiroutka

Я просто не понимаю как работает useState, с библиотекой react-intersection state обновляется быстро, а без библиотеке state обновляется только после рендеринга. Не понимаю как это работает

библиотека react-intersection state под капотом также использует хуки react, в том числе и useState. В вашем первоначальном коде была как минимум одна проблема, это то что обсервер пересоздавался каждую перерисовку компонента, а добавление элемента который отслеживался выполняось только когда менялась дата,

Javascript

1
2
3

  useEffect(() => {
    observer.observe(observerPoint.current)
  }, [data])

и как следствие в какой то момент обсервер продолжал перезодаваться, а отслеживаемый элемент в новый экземпляр обсервера не добавлялся и счетчик пересечений не увеливался потому что обсерверу нечего было отслеживать , поэтому я Вам посоветовал использовать экземпляр обсервера который не пересоздается.

Любое изменение стейта или пропсов приводит к перерисовке компонента, для того чтобы хранить данные между перерисовками илспользуется мемоизация useMemo useCallback и рефы. Читайте про них в документации.

@mr_dramm молодой 1769 / 1010 / 320 Регистрация: 17.07.2021 Сообщений: 2,048 Записей в блоге: 12
	08.07.2023, 15:46	6
	с одной стороны лаконично с точки зрения написания кода, с другой в бандл добавится весь код библиотеки "react-intersection-observer" хотя это может быть и не критично для Вашего проекта. Главное чтобы Вас все устраивало 0

@samiroutka 4 / 4 / 1 Регистрация: 26.03.2023 Сообщений: 153
	08.07.2023, 17:56 [ТС]	7
	??? Добавлено через 2 часа 3 минуты Я просто не понимаю как работает useState, с библиотекой react-intersection state обновляется быстро, а без библиотеке state обновляется только после рендеринга. Не понимаю как это работает 0