javascript - 未捕获的 RangeError：调用自定义钩子时 React js 中超出了最大调用堆栈大小

Question

我正在尝试从我的组件发送一个success或值并将该值设置为该值以挂钩。然后从组件中调用钩子并尝试根据钩子返回的or值将消息呈现在上方。但是从组件调用钩子时出现错误。errorEdituseAlertuseAlertListListsuccesserroruseAlertList

我的自定义挂钩如下 useAlert.js：：

import React from "react";

function useAlert(props){

    const [alert, setAlert] = useAlert("");

    useEffect(()=>{
        setAlert(props.alert);
    },[]);
    return alert;
}
export default useAlert;

从下面的组件，我调用自定义钩子 List.js：：

import React,{useState, useEffect} from "react";
import axios from "axios";
import Moment from 'react-moment';
import {Link} from "react-router-dom";
import Pagination from "react-js-pagination";
import useAlert from "../hooks/useAlert.js";
import Error from "../alerts/Error.js";
import Success from "../alerts/Success.js";

function List(){

    const [alert, setAlert] = useState("");
    
    let alo = useAlert(alert);

    const [categories, setCategories] = useState([]);
    const [activePage, setActivePage] = useState(1);
    const [itemsCountPerPage, setItemsCountPerPage] = useState(0);
    const [totalItemsCount, setTotalItemsCount] = useState(0);

    useEffect(()=>{
        axios.get('http://127.0.0.1:8000/categories')
          .then(function (response) {
            console.log(response);
            setActivePage(response.data.current_page);
            setCategories(response.data.data);
            setItemsCountPerPage(response.data.per_page);
            setTotalItemsCount(response.data.total);
          })
          .catch(function (error) {
            console.log(error);
          });
    },[]);

    function handleClick(id){

        axios.delete('http://127.0.0.1:8000/delete/'+id)
          .then(function (response) {
            console.log(response);
            setActivePage(response.data.current_page);
            setCategories(response.data.data);
            setItemsCountPerPage(response.data.per_page);
            setTotalItemsCount(response.data.total);
          })
          .catch(function (error) {
            console.log(error);
          });
    }
    function handlePageChange(pageNumber) {
        console.log(`active page is ${pageNumber}`);
        
        axios.get('http://127.0.0.1:8000/categories?page='+pageNumber)
          .then(function (response) {
            console.log(response);
            setActivePage(response.data.current_page);
            setCategories(response.data.data);
            setItemsCountPerPage(response.data.per_page);
            setTotalItemsCount(response.data.total);
          })
          .catch(function (error) {
            console.log(error);
          });
      }

    return(
            <>
            
            {alo==="success" ? <Success msg="Category Updated successfully." />:null}

            <table className="table" style={{marginTop: "20px"}}>
              <thead>
                <tr>
                  <th scope="col">SL.</th>
                  <th scope="col">Name</th>
                  <th scope="col">Created_at</th>
                  <th scope="col">Updated_at</th>
                  <th scope="col">Edit</th>
                  <th scope="col">Delete</th>
                </tr>
              </thead>
              <tbody>
              {
                categories.map((category, index)=>{

                    return(
                            <tr key={index}>
                              <th scope="row">{index+1}</th>
                              <td>{category.name}</td>
                              <td><Moment format="D MMM YYYY">{category.created_at}</Moment></td>
                              <td><Moment format="D MMM YYYY">{category.updated_at}</Moment></td>
                              <td><Link to={`/edit/${category.id}`} className="btn btn-primary">Edit</Link></td>
                              <td><button onClick={()=>handleClick(category.id)} type="button" className="btn btn-danger">Delete</button></td>
                            </tr>
                        )
                })
              }
               
              </tbody>
            </table>

                <div className="d-flex justify-content-center">
                    <Pagination
                      activePage={activePage}
                      itemsCountPerPage={itemsCountPerPage}
                      totalItemsCount={totalItemsCount}
                      pageRangeDisplayed={5}
                      onChange={handlePageChange}
                      itemClass="page-item"
                      linkClass="page-link"
                    />
                </div>
            </>
        );
}

export default List;

我尝试了很多方法，但我得到了以下错误-->

Uncaught RangeError: Maximum call stack size exceeded
    at useAlert (app.js:2130)
    at useAlert (app.js:2131)
    at useAlert (app.js:2131)
    at useAlert (app.js:2131)
    at useAlert (app.js:2131)
    at useAlert (app.js:2131)
    at useAlert (app.js:2131)
    at useAlert (app.js:2131)
    at useAlert (app.js:2131)
    at useAlert (app.js:2131)

请任何专家检查代码并让我知道这里有什么问题？我该如何解决？

标签： javascriptreactjsreact-nativereact-hooks

Answer 1

我在我的钩子中犯了一个错误，除了使用useState. 如果对任何人有帮助，请回答自己。

正确的代码如下：

import React, {useState,useEffect} from "react";

function useAlert(al){


    **const [alert, setAlert] = useState("");**   //made mistake here


    useEffect(()=>{
        setAlert(al);
    },[]);
    return alert;
}
export default useAlert;