ReactJS: как вызвать хук useEffect только один раз для получения данных API
Используя React, у меня есть следующий функциональный компонент, в котором я использую useEffect():
import React, { useEffect } from 'react';
import { connect } from 'react-redux';
const MessagingComponent = React.memo(({ loadMessages, messages, ...props }) => {
useEffect(() => {
loadMessages();
});
return <div {...props}>These are the messages</div>;
});
const mapDispatchToProps = dispatch => ({
loadMessages: () => dispatch({ type: 'LOAD_MESSAGES' })
});
const mapStateToProps = state => {
return {
messages: state.chatt.messages.chatMessages
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(MessagingComponent);
Как видите, у меня есть обратный вызов эффекта, который вызывает функцию loadMessages() в обратном вызове useEffect() в моем MessagingComponent:
useEffect(() => {
loadMessages();
});
Вызов loadMessages() загружает сообщения, которые вызывают повторную визуализацию компонента. Такое поведение ожидаемо, однако проблема в том, что повторный рендеринг снова вызывает срабатывание хука useEffect(), что вызывает повторный вызов loadMessages(). Это, в свою очередь, загружает сообщения из серверной части и вызывает повторную визуализацию компонента, и цикл повторяется.
Как я могу этого избежать? Должен ли я просто поставить условие if в хук useEffect() и проверить свойство messages?
Ответы 2
Если я правильно понимаю, вы хотите имитировать поведение «при монтировании компонента» обычных реагирующих компонентов на основе классов через useEffect(), чтобы обратный вызов эффекта срабатывал только один раз при первом рендеринге.
Чтобы добиться такого поведения, вы можете передать пустой массив второму аргументу useEffect() следующим образом:
useEffect(() => {
loadMessages();
}, []); /* <-- add this */
Второй аргумент массива позволяет указать, какие переменные prop вызывают обратный вызов useEffect() (если есть) при изменении их значений.
Передача пустого массива означает, что useEffect() не будет запускаться никакими изменениями входных prop переменных и, в свою очередь, будет вызываться только один раз, во время первого рендеринга.
Для получения дополнительной информации об этом втором аргументе, см. эту документацию и эта документация
Что делать с предупреждением? Должны ли мы просто оставить это? Я использую редукционный преобразователь и делаю props.loadMessages(), и предупреждаю, что props — это отсутствующая зависимость. Что делать в таком случае? Спасибо
Чтобы избавиться от предупреждения, вы можете добавить свою функцию в массив зависимостей, например: useEffect(() => { loadMessages(); }, [loadMessages]);. Когда вы предоставляете массив зависимостей, ваш эффект будет работать только в том случае, если одна из зависимостей изменится. Таким образом, ваш эффект будет работать снова только в том случае, если ваша функция loadMessage изменится, чего, вероятно, не произойдет.
@alextouzel добавление функции в массив deps вызовет бесконечный цикл
@GianlucaPietrobon Если ссылка на функцию loadMessages не изменится, это не вызовет бесконечного цикла. По умолчанию mapDispatchToProps вызывается только один раз (при создании экземпляра вашего компонента), поэтому в этом случае ссылка на функцию должна остаться прежней, а хук useEffect будет запускаться только один раз, даже если среди его зависимостей есть loadMessages.
useEffect() — это хук реагирования для функциональных компонентов, который охватывает функциональность хуков жизненного цикла компонентов класса. useEffect() объединяет componentDidMount(), componentDidUpdate() и componentWillUnmount() компонентов класса, что означает, что он будет выполняться при монтировании компонента, при изменении состояния компонента и при отключении компонента от DOM.
Проверьте ниже пример,
useEffect(() => {
setTimeout(() => {
alert("data saved");
}, 1000);
});
Приведенный выше код/предупреждение выполняется, когда компонент монтируется/начальный рендеринг, когда состояние компонента изменяется и когда компонент отключается от DOM.
Чтобы приведенный выше код запускался реже, мы можем передать массив значений в качестве второго аргумента в качестве зависимостей для этого эффекта. Если одна из зависимостей изменится, эффект запустится снова.
Представьте, что у нас есть массив лиц, переданный в реквизиты функционального компонента, и мы хотим, чтобы оповещение выполнялось только при изменении массива лиц.
useEffect(() => {
setTimeout(() => {
alert("data saved");
}, 1000);
}, [props.persons]);
Это выполнит код во время первоначального рендеринга и при изменении props.persons.
Таким образом, чтобы выполнить код только во время первоначального рендеринга/монтирования компонента, вы можете передать пустой массив, что означает, что зависимости не указаны, когда должен выполняться эффект. Следовательно, запускайте во время первоначального рендеринга и когда компонент размонтирован.
useEffect(() => {
setTimeout(() => {
alert("data saved");
}, 1000);
}, []);
Вы можете изменить свой хук useEffect(), как показано ниже, чтобы вызвать его только один раз для получения данных API,
useEffect(() => {
loadMessages();
}, []);
Это вызывает предупреждение:
React Hook useEffect has missing dependencies: loadMessages Either include them or remove the dependency array react-hooks/exhaustive-deps