為什麼我的 React 應用程式中會出現「無效的鉤子呼叫」錯誤？

React 中無效的Hook 呼叫錯誤：綜合指南

當嘗試使用React 在表中顯示資料時，您可能會遇到以下錯誤「無效的鉤子呼叫。鉤子只能在函數元件的主體內部呼叫。」出現此錯誤的原因有多種，了解如何解決它對於React 開發至關重要。

錯誤原因

1. React 版本不符: 確保您安裝了正確版本的 React 和關聯的渲染器。版本不一致可能會導致此錯誤。
2. 違反 Hook 規則： React hook 遵循特定規則，例如僅在功能元件內呼叫。確保遵守這些約定。
3. 多個 React 實例： 驗證您的應用程式中是否只有一個 React 實例。多個實例可能會導致衝突並觸發此錯誤。

Material-UI 範例

考慮以下程式碼範例：

<code class="javascript">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;</code>

解答在這個範例中，出現錯誤是因為元件被定義為類別元件。 React hooks 在以後的 React 版本中引入，只能在功能元件中使用。要解決此問題：

將類別組件轉換為函數式元件。

1. 使用鉤子而不是方法來管理狀態和執行副作用。

進一步幫助

有關修正「無效掛鉤呼叫」錯誤的其他指示：

[React 文件](https ://reactjs.org/ docs/hooks-rules.html)

• [宣告式設定](https://blog.logrocket.com/declarative-setup-of-front-end-typescript-and -react/)
• [npm 連結替代指令](https://blog.bitsrc.io/an-alternative-npm-link-command-a49f7a92bfd4)

以上是為什麼我的 React 應用程式中會出現「無效的鉤子呼叫」錯誤？的詳細內容。更多資訊請關注PHP中文網其他相關文章！