开发者问题收集

参数错误,必须为反应元素,但您传递了未定义的参数

2020-08-09
12011

我开始在 react 和material ui 中开发一个新应用程序,遇到了一个问题:

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;
2个回答

看起来 Material UI 的 Select 组件的 variant 属性区分大小写。
它允许值 'filled' | 'outlined' | 'standard'

因此,要解决这个问题,只需将 Outlined 改为 outlined

<Select variant = "outlined" value = "abc">
95faf8e76605e973
2020-08-09

variant 应为小写的 outlined ,并且请将 valueonChange 属性传递给 select

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;
Shubham Chitransh
2020-08-09