我想用React在一个表中显示一些记录,但我得到了这个错误:

无效的钩子调用。类的主体内部只能调用钩子 功能组件。这可能发生在以下情况之一 原因: React和渲染器的版本可能不匹配(比如React DOM) 你可能违反了胡克斯的规矩 你可能在同一个应用程序中有多个React副本,请参阅有关如何调试和调试的提示 解决这个问题。

import React, {
  Component
} from 'react';
import {
  makeStyles
} from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';

const useStyles = makeStyles(theme => ({
  root: {
    width: '100%',
    marginTop: theme.spacing(3),
    overflowX: 'auto',
  },
  table: {
    minWidth: 650,
  },
}));

class allowance extends Component {
  constructor() {
    super();
    this.state = {
      allowances: [],
    };

  }

  componentWillMount() {
    fetch('http://127.0.0.1:8000/allowances')
      .then(data => {

        return data.json();

      }).then(data => {

        this.setState({
          allowances: data
        });

        console.log("allowance state", this.state.allowances);
      })

  }



  render() {
    const classes = useStyles();
    return ( <
      Paper className = {
        classes.root
      } >
      <
      Table className = {
        classes.table
      } >
      <
      TableHead >
      <
      TableRow >
      <
      TableCell > Allow ID < /TableCell> <
      TableCell align = "right" > Description < /TableCell> <
      TableCell align = "right" > Allow Amount < /TableCell> <
      TableCell align = "right" > AllowType < /TableCell>

      <
      /TableRow> <
      /TableHead> <
      TableBody > {
        this.state.allowances.map(row => ( <
          TableRow key = {
            row.id
          } >
          <
          TableCell component = "th"
          scope = "row" > {
            row.AllowID
          } <
          /TableCell> <
          TableCell align = "right" > {
            row.AllowDesc
          } < /TableCell> <
          TableCell align = "right" > {
            row.AllowAmt
          } < /TableCell> <
          TableCell align = "right" > {
            row.AllowType
          } < /TableCell>                     <
          /TableRow>
        ))
      } <
      /TableBody> <
      /Table> <
      /Paper>
    );
  }

}

export default allowance;

当前回答

你只能从React函数中调用钩子。点击这里阅读更多。

只需将Allowance类组件转换为功能组件。

Working CodeSandbox演示。

const Allowance = () => {
  const [allowances, setAllowances] = useState([]);

  useEffect(() => {
    fetch("http://127.0.0.1:8000/allowances")
      .then(data => {
        return data.json();
      })
      .then(data => {
        setAllowances(data);
      })
      .catch(err => {
        console.log(123123);
      });
  }, []);

  const classes = useStyles();
  return ( <
    Paper className = {
      classes.root
    } >
    <
    Table className = {
      classes.table
    } >
    <
    TableHead >
    <
    TableRow >
    <
    TableCell > Allow ID < /TableCell> <
    TableCell align = "right" > Description < /TableCell> <
    TableCell align = "right" > Allow Amount < /TableCell> <
    TableCell align = "right" > AllowType < /TableCell> <
    /TableRow> <
    /TableHead> <
    TableBody > {
      allowances.map(row => ( <
        TableRow key = {
          row.id
        } >
        <
        TableCell component = "th"
        scope = "row" > {
          row.AllowID
        } <
        /TableCell> <
        TableCell align = "right" > {
          row.AllowDesc
        } < /TableCell> <
        TableCell align = "right" > {
          row.AllowAmt
        } < /TableCell> <
        TableCell align = "right" > {
          row.AllowType
        } < /TableCell> <
        /TableRow>
      ))
    } <
    /TableBody> <
    /Table> <
    /Paper>
  );
};

export default Allowance;

其他回答

您可以查看您的路线。如果你在Route(<Route path="/testpath" render = {(props)=><Test{…Props} />} />) 你在一个箭头函数中调用了你的组件,给它传递了合适的道具。

在我的例子中,我在FlatList的renderItem道具中传递组件名称,而不是函数。它在早期工作,因为我的组件是一个功能组件,但当我添加钩子时,它失败了。

之前:

    <FlatList
        data={memberList}
        renderItem={<MemberItem/>}
        keyExtractor={member => member.name.split(' ').join('')}
        ListEmptyComponent={
          <Text style={{textAlign: 'center', padding: 30}}>
            No Data: Click above button to fetch data
          </Text>
        }
      />

后:

    <FlatList
        data={memberList}
        renderItem={({item, index}) => <MemberItem item={item} key={index} />}
        keyExtractor={member => member.name.split(' ').join('')}
        ListEmptyComponent={
          <Text style={{textAlign: 'center', padding: 30}}>
            No Data: Click above button to fetch data
          </Text>
        }
      />

使用依赖项而不安装依赖项时也会发生。 发生在我身上,当我从“@material-ui/icons/”调用MenuIcon时,在项目中丢失了。

我遇到这个问题,我的错误原因是我开发项目A,我把另一个项目B链接到A,但是A有React包,B也有React包,它们是同一个版本(16.13)。 但是这引起了问题,我设置文件的意思是webpack.config.js,像这样:

alias: {
  'react': path.join(path.resolve(__dirname), '../node_modules/react'),
},

将B React包解析为A React包,我猜原因是一个项目不能有两个或两个以上的React包,即使它们是相同的版本。但我无法证实我的猜测。

这是我解决问题的方法。我有node_modules文件夹和files包。Json和包锁。Json在我的组件文件夹以及在我的项目的根它所属的地方。我把它们从不属于它们的地方删除了。不要问我做了什么把它们放在那里,我一定是在错误的位置做了一个npm。