Получение ошибки при включении хлебных крошек в material-ui

Question

Я использую material-ui / core версии 3.9.0. & React версии 16.13.1.

Однако необходимо включить хлебную крошку. Обновлен пакет material-ui до версии 4.0.2. Однако при компиляции приложения ошибки не возникает. При загрузке приложения возникает ошибка. Ошибка выглядит следующим образом:

SelectInput.js:288 Uncaught TypeError: Cannot read property 'value' of undefined
at SelectInput.js:288
at Array.map (<anonymous>)
at SelectInput.js:287
at commitHookEffectListMount (react-dom.development.js:19731)
at commitPassiveHookEffects (react-dom.development.js:19769)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at flushPassiveEffectsImpl (react-dom.development.js:22853)
at unstable_runWithPriority (scheduler.development.js:653)

В режиме отладки ошибка находится в следующем файле - node_modules/@material-ui/core/esm/Select/SelectInput.js файл ошибка отображается как

React.useEffect(function () {
  if (!foundMatch && !multiple && value !== '') {
    var values = React.Children.toArray(children).map(function (child) {
      return child.props.value;
    });
    console.warn(["Material-UI: you have provided an out-of-range value `".concat(value, "` for the select ").concat(name ? "(name=\"".concat(name, "\") ") : '', "component."), "Consider providing a value that matches one of the available options or ''.", "The available values are ".concat(values.filter(function (x) {
      return x != null;
    }).map(function (x) {
      return "`".concat(x, "`");
    }).join(', ') || '""', ".")].join('\n'));
  }
}, [foundMatch, children, multiple, name, value]);







            <Select
            className={`clientSelector selectCombo ${classNames}`}
            value={value}
            renderValue={(value) =>
              items.find((d) => d.clientId == value).name
            }
            onChange={(e) => this.valueSelected(e)}
            disabled={clientDisabled}
          >
            {items.map((item, i) => {
              return (
                <MenuItem key={i} value={item.clientId}>
                  {item.name}
                </MenuItem>
              );
            })}
          </Select>

Answer 1

Я думаю, вам следует еще раз проверить свой компонент, ошибка SelectInput.js:288 Uncaught TypeError: Cannot read property 'value' of undefined, поэтому вам следует проверить переменную value, которую вы передаете компоненту Select в строке 288 в SelectInput.js. Вы определили переменную с именем value в своем компоненте?