Question

我刚开始反应，我遇到了挂机调用的问题。我知道是什么导致了问题，但我不知道如何在不从头开始的情况下解决它。这是代码：

import { Fragment, PureComponent } from "react";

//Test Imports
import { Input, makeStyles } from '@material-ui/core';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import testDaten from './testData.js';
import { Link } from "react-router-dom";
//

 //Test
 const UseStyles = makeStyles((theme) => ({
    root: {
      flexGrow: 1,
      marginTop: '100px',
      marginLeft: '100px',
      marginRight: '50px',
      
    },
  
    grid: {
      color: theme.palette.text.primary,
    },
    paper: {
      padding: theme.spacing(2),
      textAlign: 'center',
      color: theme.palette.text.primary,
    },
    photo: {
      height: '200px',
      width: '200px',
    }
    }));
    //

class Select extends PureComponent {

    state = {
      options: [
        {
          name: 'Select…',
          value: null,
        },
        {
          name: 'A',
          value: 'a',
        },
        {
          name: 'B',
          value: 'b',
        },
        {
          name: 'C',
          value: 'c',
        },
      ],
      value: '?',
    };
  
    handleChange = (event: any) => {
      this.setState({ value: event.target.value });
    };
       
    render() {

   

    const { options, value } = this.state;
    const classes = UseStyles();

        return (
          <Fragment>
            <select onChange={this.handleChange} value={value}>
              {options.map(item => (
                <option key={item.value} value={String(item.value)}>
                  {item.name}
                </option>
              ))}
            </select>
            <h1>Favorite letter: {value}</h1>
            
            {testDaten.map((item, key) => {
            if(value != null){
            return (
            <Grid item xs={4} sm={4} key={item.id}>
              <Input value={item.id} type="number" id="idTest"/> 
              <Paper className={classes.paper}> Besucher-Id: {item.id} </Paper>
              <Paper className={classes.paper}> Name: {item.vorname} {item.nachname}</Paper>
              <Paper className={classes.paper}> Nachweisart: {item.nachweisart} </Paper> 
              <Paper className={classes.paper}>   <Link to={`/zuBewertenderTest/${item.id}`}>Mehr Informationen</Link> </Paper> 
            </Grid>
          )
        }
          })}
          </Fragment>

          
        );
      }
    }

    export default Select;

在渲染函数中，我有 const classes = UseStyles(); --> 在我的理解中，这会导致钩子错误，因为它不在顶层。无论如何，我不知道如何在没有它的情况下分配材料 ui 类。也许有人可以提供帮助。

谢谢！

Answer 1

将类转换为功能组件或使用materialui的Hoc(withstyles)

下面的代码转换为withstyles访问来自classses props的样式

import { Fragment, PureComponent } from "react";
import { Input, withStyles } from "@material-ui/core";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";
import testDaten from "./testData.js";
import { Link } from "react-router-dom";

const styles = (theme) => ({
  root: {
    flexGrow: 1,
    marginTop: "100px",
    marginLeft: "100px",
    marginRight: "50px",
  },

  grid: {
    color: theme.palette.text.primary,
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: "center",
    color: theme.palette.text.primary,
  },
  photo: {
    height: "200px",
    width: "200px",
  },
});

class Select extends PureComponent {
  state = {
    options: [
      {
        name: "Select…",
        value: null,
      },
      {
        name: "A",
        value: "a",
      },
      {
        name: "B",
        value: "b",
      },
      {
        name: "C",
        value: "c",
      },
    ],
    value: "?",
  };

  handleChange = (event: any) => {
    this.setState({ value: event.target.value });
  };

  render() {
    const { classes } = this.props;
    const { options, value } = this.state;

    console.log(classes);
    return (
      <Fragment>
        <select onChange={this.handleChange} value={value}>
          {options.map((item) => (
            <option key={item.value} value={String(item.value)}>
              {item.name}
            </option>
          ))}
        </select>
        <h1>Favorite letter: {value}</h1>

        {testDaten.map((item, key) => {
          if (value != null) {
            return (
              <Grid item xs={4} sm={4} key={item.id}>
                <Input value={item.id} type="number" id="idTest" />
                <Paper className={classes.paper}>
                  {" "}
                  Besucher-Id: {item.id}{" "}
                </Paper>
                <Paper className={classes.paper}>
                  {" "}
                  Name: {item.vorname} {item.nachname}
                </Paper>
                <Paper className={classes.paper}>
                  {" "}
                  Nachweisart: {item.nachweisart}{" "}
                </Paper>
                <Paper className={classes.paper}>
                  {" "}
                  <Link to={`/zuBewertenderTest/${item.id}`}>
                    Mehr Informationen
                  </Link>{" "}
                </Paper>
              </Grid>
            );
          }
        })}
      </Fragment>
    );
  }
}

export default withStyles(styles)(Select);

无效的 Hook Call React（如何分配材质 ui 类）

1 个答案: