web-dev-qa-db-ja.com

無効なフック呼び出し。フックは関数コンポーネントの本体の内部でのみ呼び出すことができます

私はReactを初めて使用するので、テーブルにレコードを表示したいのですが、このエラーが発生しました。助けてください。

無効なフック呼び出し。フックは、関数コンポーネントの本体の内部でのみ呼び出すことができます。これは、次のいずれかの理由で発生する可能性があります。1. Reactとレンダラー（React DOM）など）のバージョンが一致していない可能性があります。フックのルールに違反している3.同じアプリに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;
reactjsmaterial-ui
13
Jze

Only Call Hooks from React Functions。詳細はこちら https://reactjs.org/docs/hooks-rules.html#only-call-hooks-from-react-functions 。 Allowanceクラスコンポーネントを機能コンポーネントに変換するだけです。ここで動作するデモ https://codesandbox.io/s/amazing-poitras-k2fuf

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;
11
Giang Le

React linterはuseで始まるすべてのメソッドをフックとフックがクラス内で機能しないと想定しています。 const useStylesの名前をconst myStylesのようにuseで始まらないものに変更することで、問題ありません。

更新：

makeStylesはフックAPIであり、クラス内では使用できません。スタイル付きコンポーネントAPIを使用できます。参照 ここ

4
Sina

クラスコンポーネントをフックに変換できますが、Material v4にはwithStyles HOCがあります。 https://material-ui.com/styles/basics/#higher-order-component-api このHOCを使用すると、コードを変更せずに維持できます。

1
Chinmay Pandey

昨日、コードを短くしました（<Provider store={store}>）でも、この無効なフック呼び出しの問題が発生しました。これにより、自分が犯した間違いに突然気づきました。そのフォルダーにreact-reduxソフトウェアをインストールしていません。

このソフトウェアを他のプロジェクトフォルダにインストールしたので、このソフトウェアにも必要であることを知りませんでした。インストール後、エラーはなくなりました。

1
Zelda Yuan