1

браузер говорит что ошибка в строке "const onAfterChange = useCallback"

const PickersFromMenu = ({ layerName }: { layerName: Layers }) => {
  return (
    <Dropdown overlay={<ColorPickerContainer layerName={layerName} />} trigger={['click']}>
      <Button className="ant-dropdown-link" onClick={(e) => e.preventDefault()}>
        <SettingOutlined />
        Выбор цвета типа дорог
        <DownOutlined />
      </Button>
    </Dropdown>
  );
};

const LayerSettingsItemFactory = ({ settingObj, layerName, changeSetting }: LayerSettingsItemFactoryProps) => {
  const { type, keyForDeck, currentValue, label } = settingObj;

  const onAfterChange = useCallback(
    (val) => changeSetting(layerName, keyForDeck, val),
    [changeSetting, keyForDeck, layerName]
  );

  const result = useMemo(() => {
    switch (type) {
      case Number:
        const { minimum, maximum, step } = settingObj;
        return (
          <SettingsControlsItem key={_.uniqueId()}>
            <Slider
              key={keyForDeck}
              min={minimum}
              max={maximum}
              step={step}
              defaultValue={+currentValue}
              onAfterChange={onAfterChange}
              width={'100%'}
              label={label}
              showInfoPanel={true}
            />
          </SettingsControlsItem>
        );
      case Boolean:
        return (
          <SettingsControlsItem>
            <Checkbox
              checkboxColor={theme.colors.primary}
              fontColor={theme.colors.paragraph}
              checked={!!currentValue}
              onChange={() => changeSetting(layerName, keyForDeck, !currentValue)}
            >
              {label}
            </Checkbox>
          </SettingsControlsItem>
        );
      case 'color':
        return (
          <SettingsControlsItem key={_.uniqueId()}>
            <PickersFromMenu layerName={layerName} />
          </SettingsControlsItem>
        );
      default:
        return null;
    }
  }, [changeSetting, currentValue, keyForDeck, label, layerName, onAfterChange, settingObj, type]);

  return result;
};

const LayerChangeControlsField = ({ selectedLayer, changeLayerSetting }: LayerChangeControlsFieldProps) => {
  const settings = selectedLayer?.customSettings.map((settingObj: IsettingObj) =>
    LayerSettingsItemFactory({ settingObj, layerName: selectedLayer?.name, changeSetting: changeLayerSetting })
  );
  return <>{settings}</>;
};
1
  • приведите минимально работающий пример, а не просто часть кода
    – Sanya H
    Commented 22 нояб. 2021 в 11:46

2 ответа 2

1

Это говорит о неправильном использовании хуков https://ru.reactjs.org/docs/hooks-rules.html. На этом рендере вызовов хуков было больше, чем на предыдущем рендере. React подсчитывает кол-во вызовов хуков.

Возможно, внутри changeSetting() есть вызов хука. А функция onAfterChange при одном рендере была вызвана, а при другом нет.

0

Только что столкнулся. Пофиксил, убрав кое-где useLayoutEffect (он на стороне ssr не играет роли, а в продакшен-сборке учавствует в каких-то счетчиках вызовов хуков))

1
  • добро пожаловать на stack overflow на русском! пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править Commented 27 апр. 2023 в 14:11

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.