Блог

Главная - Вопросы по программированию - React — эффект использования срабатывает дважды, когда реквизит меняется с неопределенного на объект

React — эффект использования срабатывает дважды, когда реквизит меняется с неопределенного на объект

#reactjs #react-hooks #use-effect

Вопрос:

Я создал многоразовый компонент, который используется несколькими шаблонами потребителей. И шаблоны передают реквизиты с разными значениями. шаблон-А передается propA = { name: "John"} , в то время как шаблон-В не передает propA. И компонент выполняет вызов API в useEffect методе на основе переданного propA, где он устанавливает значение по умолчанию для propA в качестве пустого объекта. проблема здесь в том, что шаблон-B дважды вызывает вызов API. Я предполагаю, что это связано с тем, что, поскольку шаблон-B не передает propA, значение propA изменяется с неопределенного на пустой объект по умолчанию. Как бы вы справились с этим сценарием, чтобы избежать многократных вызовов API?

Компонент

 const defaultVal = {};
const Component = ({ propA = defaultVal}) => {
  useEffect(() => {
    fetch("url").then((data) => {
      setData(data)
    })
  }, [propA])
};

Шаблон — А

 <Component propA = {{ name: "John"}} />

Шаблон — В

 <Component />

Любая помощь будет признательна, заранее спасибо!

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

1. Учитывая , как вы определили <Component /> , propA никогда не будет undefined . Таким образом, ваше предположение о том, что проблема возникает из-за того, что она переключается с неопределенного значения на значение по умолчанию , не может быть правильным. Должен быть какой-то другой источник проблемы. Может быть, вы рендерите свое приложение в строгом режиме?

2. @Yoshi Хорошо, так какова была бы ценность propA, если бы я ее не сдал.

3. Текущее значение defaultVal .

4. Ммм, это правда.

5. Вопрос: но действительно ли необходимо иметь propA в useEffect списке deps? Я не вижу никаких зависимостей в коде useEffect (но, может быть, вы написали просто пример, код более сложный…)

Метки: ,