node.js - 参数错误必须是 react 元素，但您传递了未定义

Question

我开始在react和material ui中开发一个新的app，遇到了一个问题:

Error: React.cloneElement(...): The argument must be a React element, but you passed undefined.

因此我还没有编写任何逻辑代码，我刚刚开始使用 react 和 material ui。对此问题的解决方案和指导将非常有帮助。
这是代码:

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">
        <Select variant = "Outlined" value = "abc">
          <MenuItem value="worldwide">Worldwide</MenuItem>
          <MenuItem value="worldwide">Option 2</MenuItem>
          <MenuItem value="worldwide">Worldwide</MenuItem>
          <MenuItem value="worldwide">Worldwide</MenuItem>
        </Select>
      </FormControl>

      {/* { Header } */}
      {/* { Title + Select input dropdown field } */}

      {/* { Info Box1 } */}
      {/* { Info Box2 } */}
      {/* { Info Box3 } */}

      {/* { Table } */}
      {/* { Graph } */}

      {/* { Map } */}
    </div>
  );
}

export default App;

Answer 1

variant应该是小写outlined也请通过 value和 onChange Prop 选择

function App() {
const [country, setCountry] = useState("")
  return (
    <div className="app">
      <h1></h1>
      <FormControl className="app_dropdown">
        <Select variant = "outlined" value = {country} onChange={(e) => setCountry(e.target.value)}>
          <MenuItem value="India">India</MenuItem>
          <MenuItem value="USA">USA</MenuItem>
          <MenuItem value="UK">UK</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}

export default App;