Огонь useEffect на загруженной странице - реагировать

Я работаю с реактивным администратором (поэтому мой контент извлекается из моего API), и я создал кнопку, чтобы минимизировать длину текста, чтобы ячейки моей таблицы не имели большой высоты и сохраняли легко читаемую таблицу.

Вот мой код:

const [isMinimized, setIsMinimized] = useState(false);

useEffect(() => {

        if (isMinimized) {
            // reduce texts size
            const spans = document.getElementsByClassName("MuiTypography-body2");
            const spansList = [...spans];
            for (const span of spansList) {
                if (span.textContent.length > 20) {
                    span.textContent = span.textContent.substring(0, 20) + "..."
                }
            }
        }

    }, [isMinimized]);

Я запускаю эту функцию с состоянием, которое меняется, когда я нажимаю кнопку «свернуть содержимое».

Теперь я хотел бы применить эту функцию, но когда страница смонтирована. Не по событию клика. Я хочу избавиться от кнопки.

Поэтому я попытался установить для своего состояния isMinimized значение true и применить свой useEffect, когда он истинен, но при загрузке первой страницы он не работает.

Есть идеи, как этого добиться?

PS: Это не работает при загрузке страницы, но если я перехожу к другому компоненту и возвращаюсь, это работает. Итак, я хотел бы применить свой useEffect при загрузке первой страницы.

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

Naveen 10.11.2022 09:34

@Naveen неправда, useEffect хуки, содержащие зависимости, все еще работают, когда компонент смонтирован

andy mccullough 10.11.2022 09:39

@Naveen, да, я думаю, что мой useEffect применяется до того, как контент span поступит из API

Johan 10.11.2022 09:49
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
3
81
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

Вы можете добиться этого, просто передав пустой массив в массив зависимостей следующим образом:

useEffect(() => {

  // reduce texts size
  const spans = document.getElementsByClassName("MuiTypography-body2");
  const spansList = [...spans];
  for (const span of spansList) {
    if (span.textContent.length > 20) {
      span.textContent = span.textContent.substring(0, 20) + "..."
    }
  }

}, []);

Передача пустого массива зависимостей позволит функции, переданной в useEffect, выполняться при первом рендеринге, что устраняет необходимость в переменной состояния.

В качестве альтернативы, более простым способом достижения того же результата было бы использование свойства CSS Text Overflow ellipsis для усечения строк при сохранении содержимого следующим образом:

.truncate {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Подробнее об этом здесь

Здравствуйте, спасибо за ваш ответ. Это была моя первая попытка, но (может быть, из-за react-admin?) она не работает. он поместил мой текст только в одну строку. Так что проблема не в высоте, а в ширине, ха-ха

Johan 10.11.2022 09:44

Наконец-то мне удалось заставить работать css, обойдя некоторые классы реактивного администратора :) спасибо!!

Johan 10.11.2022 10:08

Хотя приведенный вами код реакции мог решить проблему (похоже, что это не так), ваше понимание неверно. useEffect будет работать при монтировании, даже если список зависимостей не пуст.

nullptr 10.11.2022 14:48

@nullptr Я знаю это. Проблема с использованием переменной состояния isMinimized в хуке заключается в том, что когда она срабатывает при рендеринге, isMinimized будет ложной, поэтому она не будет запускать этот фрагмент кода. Я надеялся, что его запуск без этого условия может решить проблему.

Sudhanva M 10.11.2022 18:36

Другие вопросы по теме