Question

我遇到了在基本组件中正确呈现数据的问题吗？

questionThree.js

    import React, {Component} from 'react';
    import { makeStyles } from '@material-ui/core/styles';
    import List from '@material-ui/core/List';

    import Paper from '@material-ui/core/Paper';

    import Android from "@material-ui/icons/Android";
    import Pets from "@material-ui/icons/Pets";
    import BugReport from "@material-ui/icons/BugReport";

    import QuestionListItem from './questionListItem';
    import { createRowData } from './mocks';

    const createMockData = () =>{
        /* Please do not refactor this function */
        return [
            createRowData({species: 'Robot', name: 'T-100', Icon: Android, description: "Likes long walks, walking over the bones of it's enemies"}),
            createRowData({species: 'Bug', name:'Barry', Icon: BugReport, description: "Likes long walks, and creating problems in all your code"}),
            createRowData({species: 'Rabbit', name:'Roger', Icon: Pets, description: "Likes long walks and getting to know the inner you"}),
            createRowData({species: null, name: null, Icon: null, description: null}),
        ]
    };

    const useStyles = makeStyles(() => ({
        container:{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: '100%',
        },
        root: {
            width: '100%',
        },
        inline: {
            display: 'inline',
        },
    }));

    class questionThree extends Component {
        render(){
            const classes = useStyles();
            const mockData = createMockData();
            return (
                <div className={classes.container}>
                    <Paper>
                        <List className={classes.root}>
                            {mockData.map((item, i) =>{
                                return <QuestionListItem item={item} key={item.id} divider={i !== mockData.length -1}/>
                            })}
                        </List>
                    </Paper>
                </div>
            );
        }
    }
    export default questionThree

*question.js*

import React from 'react'
import Typography from "@material-ui/core/Typography";
import Solution from './images/solution.png'
import { CardMedia } from '@material-ui/core';
const question = ()=>{
    return (
        <div>
            <Typography variant="h4" gutterBottom>
                Question Three
            </Typography>
            <Typography variant="h5" gutterBottom>
                List on the fritz
            </Typography>
            <Typography variant="body1" gutterBottom>
                This task revolves around a bug in the render method of a basic component.
            </Typography>
            <Typography variant="body1" gutterBottom>
                Your task if you choose to accept it, is to resolve this bug (displayed on the right and in the console) .
            </Typography>
            <Typography variant="body1" gutterBottom>
                As with all the questions in this tech test, you may or may not wish to refactor some of the code.
            </Typography>
            <Typography variant="h6" gutterBottom>
                Below is what the final solution should look like. (GUID'S will vary)
            </Typography>
            <CardMedia
                image={Solution}
                style={{
                    width: '100%',
                    height: 500,
                    backgroundSize: 'contain',
                }}
                title="The Solution"
            />
        </div>
    )
};

export default  question

index.js

import React from 'react';
import QuestionThree from './questionThree';
import Question from './question'
import ErrorBoundary from '../../components/errorBoundary'
const questionThree = () =>{
    return (
        <ErrorBoundary question={Question}>
            <QuestionThree/>
        </ErrorBoundary>
    )
}

export default questionThree;

我尝试了许多解决方案，并且大多数解决方案都可以在Google上找到，但似乎无济于事。我确实尝试了https://reactjs.org/warnings/invalid-hook-call-warning.html提供的解决方案，但是遇到了从说明第二步取回结果的问题。

我想念什么？这是“我应该去Specsavers的时刻”吗？

Answer 1

makeStyles返回一个称为useStyles的钩子，该钩子只能在功能组件内部调用。这就是为什么您得到此错误。

在您的情况下，将questionThree更改为功能组件

const questionThree = (props) =>  {
   const classes = useStyles();
   const mockData = createMockData();
   return (
            <div className={classes.container}>
                <Paper>
                    <List className={classes.root}>
                        {mockData.map((item, i) =>{
                            return <QuestionListItem item={item} key={item.id} divider={i !== mockData.length -1}/>
                        })}
                    </List>
                </Paper>
            </div>
        );
}
export default questionThree

要将其用于类组件，请使用withStyles HOC

import { withStyles } from '@material-ui/core/styles';

   const styles = {
        container:{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: '100%',
        },
        root: {
            width: '100%',
        },
        inline: {
            display: 'inline',
        },
   }
   class questionThree extends Component {
        render(){
            const {classes} = props
            const mockData = createMockData();
            return (
                <div className={classes.container}>
                    <Paper>
                        <List className={classes.root}>
                            {mockData.map((item, i) =>{
                                return <QuestionListItem item={item} key={item.id} divider={i !== mockData.length -1}/>
                            })}
                        </List>
                    </Paper>
                </div>
            );
        }
    }
    export default withStyles(styles)(questionThree);

渲染方法组件错误-无效的挂钩调用。挂钩只能在功能组件的主体内部调用

1 个答案: