React+Material UI新项目报错：React.cloneElement参数需为React元素

Hey there! I totally get how frustrating it is to hit an error when you're just starting out with React and Material UI—let's break this down and fix it quickly.

What's causing the error? #

The error you're seeing happens because the Material UI Select component is receiving an invalid value for the variant prop, which leads to internal code trying to clone an undefined element. Looking at your code:

<Select variant = "Outlined" value = "abc">

You've used Outlined (capital O) for the variant, but Material UI v4 (which you're using with @material-ui/core) expects this value to be lowercase: outlined. The component doesn't recognize the capitalized version, so it fails to render properly under the hood.

The Fixed Code #

Here's your corrected component with the proper variant value:

import React from 'react';
import { MenuItem, FormControl, Select } from "@material-ui/core";
import './App.css';

function App() {
  return (
    <div className="app">
      <h1></h1>
      <FormControl className="app_dropdown">
        {/* Changed "Outlined" to "outlined" */}
        <Select variant="outlined" value="abc">
          <MenuItem value="worldwide">Worldwide</MenuItem>
          <MenuItem value="option2">Option 2</MenuItem>
          <MenuItem value="worldwide2">Worldwide</MenuItem>
          <MenuItem value="worldwide3">Worldwide</MenuItem>
        </Select>
      </FormControl>
      {/* { Header } */}
      {/* { Title + Select input dropdown field } */}
      {/* { Info Box1 } */}
      {/* { Info Box2 } */}
      {/* { Info Box3 } */}
      {/* { Table } */}
      {/* { Graph } */}
      {/* { Map } */}
    </div>
  );
}

export default App;

(I also changed some of your MenuItem values to be unique—while not the cause of your current error, unique values will help with functionality once you add logic later!)

Quick Tips for New React/MUI Developers #

• Always double-check prop values against the Material UI docs: for v4, the Select variant options are standard, outlined, and filled—all lowercase.
• When starting out, copy-paste working examples from the official docs first, then tweak them to fit your project. This helps avoid small spelling/capitalization mistakes like this one.
• If you hit similar "undefined element" errors later, it's often a sign that a component isn't receiving the props it expects—start by checking prop names and values for typos.

内容的提问来源于stack exchange，提问作者Ebrahim Mithaiwala