Последний аргумент, переданный useEffect, изменял размер между рендерами. Порядок и размер этого массива должны оставаться постоянными. [Material-UI]

Попытка использовать всплывающую подсказку из пользовательского интерфейса материала приводит к следующей ошибке:

Warning: The final argument passed to useEffect changed size between renders. The order and size of this array must remain constant.

Previous: []
Incoming: [, function () {
      if (isControlled !== (controlled !== undefined)) {
        console.error(["Material-UI: a component is changing the ".concat(isControlled ? '' : 'un', "controlled ").concat(state, " state of ").concat(name, " to be ").concat(isControlled ? 'un' : '', "controlled."), 'Elements should not switch from uncontrolled to controlled (or vice versa).', "Decide between using a controlled or uncontrolled ".concat(name, " ") + 'element for the lifetime of the component.', "The nature of the state is determined during the first render, it's considered controlled if the value is not `undefined`.";
      }
    }, 0]

Всплывающая подсказка обернута поверх значка SVG, загруженного с помощью response-svg-loader:

      <Tooltip title={'Filters'}>
        <div>
          <Filter className={classes.topIcon}
            onClick={()=> {console.log('Hello');}}/>
        </div>
      </Tooltip>

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

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

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

Спасибо!

РЕДАКТИРОВАТЬ:

та же ошибка появляется даже при использовании значка из 'material-ui / icons'.

РЕДАКТИРОВАТЬ2:

в крайнем случае попытался окружить простой div в подсказке. Тот же результат - большое красное предупреждение при наведении курсора:

    <FormGroup className={classes.percRoot}>
      <Tooltip title={'lol'}>
        <div>hello</div>
      </Tooltip>
    </FormGroup>

person Bishonen_PL    schedule 11.05.2020    source источник
comment
Не могли бы вы создать рабочий пример, используя codeandbox.io?   -  person Dekel    schedule 11.05.2020
comment
пытался воспроизвести его на коде, и, как это часто бывает, там все работало :) После мучительных проб и ошибок я сузил круг вопросов до проблем с горячей перезагрузкой. Перед моим первым импортом реакции нужно было установить горячий перезагрузчик согласно: npmjs.com/package/ реагировать на горячую загрузку   -  person Bishonen_PL    schedule 12.05.2020


Ответы (1)


Согласно: https://www.npmjs.com/package/react-hot-loader

или импортируйте 'response-hot-loader' в свой основной файл (до React)

Как ни странно, до этого момента с hot-reloader все работало отлично. Проблема всплыла только при использовании всплывающей подсказки.

person Bishonen_PL    schedule 12.05.2020