Блог

Главная - Вопросы по программированию - React useEffect: можно ли установить зависимости с помощью переменной?

React useEffect: можно ли установить зависимости с помощью переменной?

#javascript #reactjs #react-hooks #next.js

Вопрос:

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

 const states = [name, email, password]

useEffect(() => {
  someFunction({ states })
}, states)

Вместо этого я должен сделать это:

 useEffect(() => {
  someFunction({ states: [name, email, password] })
}, [name, email, password])

Это раздражает, потому что я планирую использовать этот шаблон в других формах, в которых будет 10-20 полей, поэтому я ненавижу загромождать его, каждый раз создавая весь этот массив. Есть ли лучший способ?

Комментарии:

1. Однако это должно быть возможно. С какой проблемой вы сталкиваетесь конкретно? Покажи это.

2. вы можете использовать оператор распространения [...states] , имо есть случаи, когда вы хотите прослушать изменение массива

3. Оператор распространения выдает мне то же самое предупреждение eslint.

Ответ №1:

Технически, да, это возможно. То, что вы видите, — это предупреждение от eslint, и вы можете отключить его в строке/файле. Проверьте документы здесь: https://eslint.org/docs/user-guide/configuring/rules#disabling-rules

 const states = [name, email, password]

useEffect(() => {
  someFunction({ states })
}, states) // eslint-disable-line <eslint-error-id>

Редко бывает хорошей идеей иметь такую переменную, так как eslint не сможет сказать вам, отсутствует ли у вас зависимость.

Комментарии:

1. Это имеет смысл для eslint. Не очень хорошо для того, чтобы сделать его СУХИМ, так как я также использовал бы этот же массив в функции отправки, но я понимаю.

2. @Glenn Вы можете отключить это правило, если хотите. Подумайте о том, что это дает вам, и соответствует ли это вашему стилю кода. В конце концов, это зависит от тебя. На мой взгляд, это просто незначительная проблема (иногда не принято делиться всеми зависимостями). Но он может обнаружить важные труднодоступные для вас ошибки

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

4. P.S. Я на самом деле думаю, что это правило линтинга не очень хорошо продумано. Есть много случаев, когда я устанавливаю один параметр состояния с помощью оператора распространения, потому что изменился другой параметр состояния. Правило компоновки часто считает, что мне нужно включить и то, и другое в список зависимостей, что, конечно, приводит к бесконечному циклу.

5. Если это компонент, подобный форме, я бы рассмотрел наличие данных формы в объекте в качестве опоры, а не каждое поле в качестве опоры. Но, в общем, все зависит от

Метки: