提问者:小点点

参数处的错误必须是react元素,但您传递了未定义的


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

错误:React.CloneElement(。。。):参数必须是React元素,但您传递的参数未定义。

因此,我还没有编写任何逻辑代码,我只是从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个答案

匿名用户

variant应该是小写的oultrated,并且还请传递valueonchange道具以进行选择

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;

匿名用户

看起来物料UI的select组件的variant属性区分大小写。
它允许值“填充”“概述”“标准”

因此,要解决这个问题,只需将outlited制作成outlited

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