Este error ocurre cuando proporciona una matriz vacía como options .
El registro de errores:
SelectInput.js:340 Uncaught TypeError: Cannot read properties of undefined (reading 'value') at SelectInput.js:340:1 at Array.map (<anonymous>) at SelectInput.js:339:1 at invokePassiveEffectCreate (react-dom.development.js:23487:1) at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1) at invokeGuardedCallback (react-dom.development.js:4056:1) at flushPassiveEffectsImpl (react-dom.development.js:23574:1) at unstable_runWithPriority (scheduler.development.js:468:1) at runWithPriority$1 (react-dom.development.js:11276:1) at flushPassiveEffects (react-dom.development.js:23447:1) at performSyncWorkOnRoot (react-dom.development.js:22269:1) at react-dom.development.js:11327:1 at unstable_runWithPriority (scheduler.development.js:468:1) at runWithPriority$1 (react-dom.development.js:11276:1) at flushSyncCallbackQueueImpl (react-dom.development.js:11322:1) at flushSyncCallbackQueue (react-dom.development.js:11309:1) at flushPassiveEffectsImpl (react-dom.development.js:23620:1) at unstable_runWithPriority (scheduler.development.js:468:1) at runWithPriority$1 (react-dom.development.js:11276:1) at flushPassiveEffects (react-dom.development.js:23447:1) at react-dom.development.js:23324:1 at workLoop (scheduler.development.js:417:1) at flushWork (scheduler.development.js:390:1) at MessagePort.performWorkUntilDeadline (scheduler.development.js:157:1)En mi caso, mi componente se veía así. Debes centrarte en la parte de las options solo en el pensamiento.
<FormControl error={error}> <InputLabel>{label}</InputLabel> <Select value={value} onChange={onChange} label={label} > { options.length && options.map((option, i) => { return (<MenuItem className={classes.menuItem} key={i} value={option}>{option}</MenuItem>) }) } </Select> { error && <FormHelperText>{ helperText }</FormHelperText> } </FormControl>Cuando cambié mi componente para que se vea así
<FormControl error={error}> <InputLabel>{label}</InputLabel> <Select value={value} onChange={onChange} label={label} > { // --> Notice below changes options.length > 0 && // --> Changes from `options.length ? ...` to `options.length > 0 && ...` options.map((option, i) => { return (<MenuItem className={classes.menuItem} key={i} value={option}>{option}</MenuItem>) }) } </Select> { error && <FormHelperText>{ helperText }</FormHelperText> } </FormControl>Y luego no volvió a pasar.
Si desea una explicación más larga , el registro de errores se refería a InputJS:340:1 que se refiere a la siguiente línea
React.useEffect(function () { if (!foundMatch && !multiple && value !== '') { var values = childrenArray.map(function (child) { return child.props.value; // ---> This line specifically }); 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, childrenArray, multiple, name, value]); Digamos simplemente options.length ? ... condicional permite que "cualquier valor" se deslice mientras SelectInput.js esperaba que fuera una matriz de elementos secundarios, pero en lugar de obtener una matriz, obtiene ese "cualquier valor".
Es por eso que cuando child.props.value esperaba un valor transformado, resultó en Cannot read properties of undefined (reading 'value') . Porque el child probablemente ni siquiera tiene definido el valor de los props .