我从 React 收到错误：超出最大更新深度

Question

我写了我的代码，我认为一切都是正确的，但我从 react.js 得到了一个错误错误：超出最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，就会发生这种情况。 React 限制嵌套更新的数量以防止无限循环。

App.js:

    import React, { Component } from 'react';
import Navbar from "./component/Navbar";
import './App.css';
import Users from './component/Users';
class App extends Component {
  state = {
    users: [
      {
        id: 1,
        name: "Jessie Alby",
        salary: "5000",
        department: "Software"
      },
      {
        id: 2,
        name: "John Tyson",
        salary: "10000",
        department: "Engineer"
      },
      {
        id: 3,
        name: "Billie Ashley",
        salary: "6000",
        department: "Doctor"
      }
    ]
  }
  deleteUser =(id) => {
    this.setState({
      users: this.state.users.filter(user => id !== user.id)
    })
  }
  render(){
  return (
    <div className="container">
     <Navbar title='User App2'/>
     <hr/>
     <Users deleteUser={this.deleteUser()} users={this.state.users}/>
    </div>
  );
}
}
export default App;

User.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'
class User extends Component {
    state = {
        isVisible : false
    }
    static defaultProps = {
        name: "No info",
        salary: "No info",
        department: "No info"
    }
    
    onClickEvent= (e) =>{
        this.setState({
            isVisible: !this.state.isVisible
        })
    }
    onDeleteUser = (e) => {
        const {id,deleteUser} = this.props;
        deleteUser(id);
    }
   
    render() {
        //Destructing
        const {name,department,salary} = this.props;
        const {isVisible} = this.state;
        return (
            <div className="col-md-8 mb-4">
               <div className="card">
                   <div className="card-header d-flex justify-content-between" style={{cursor:"pointer"}}>
        <h4 className="d-inline" onClick={this.onClickEvent.bind(this)}>{name}</h4>
        <i onClick={this.onDeleteUser} className="far fa-trash-alt" style={{cursor:"pointer"}}></i>
                   </div>
                   {
                       isVisible ?  <div className="card-body">
                       <p className="card-text">Salary: {salary}</p>
                       <p className="card-text">Department: {department}</p>
                                  </div> : null
                   }
               </div>
            </div>
        )
    }
}
User.propTypes = {
    name: PropTypes.string.isRequired,
    salary: PropTypes.string.isRequired,
    department: PropTypes.string.isRequired,
    deleteUser: PropTypes.func.isRequired
}
export default User;

Users.js

import React, { Component } from 'react';
import User from "./User";
import PropTypes from 'prop-types';
class Users extends Component {
    render() {
          const {users,deleteUser} = this.props;
        return (
            <div>
                {
                 users.map(user=>{
                    return(
                        <User 
                        key={user.id}
                        id={user.id}
                        name={user.name}
                        salary={user.salary}
                        department={user.department}
                        deleteUser={deleteUser}
                        />
                    )
                })
            }
            </div>
        )
    }
}
Users.propTypes = {
    users: PropTypes.array.isRequired,
    deleteUser: PropTypes.func.isRequired
}
export default Users;

Answer 1

可能与此有关：

<Users deleteUser={this.deleteUser()} users={this.state.users}/>

当你把 () 放在函数的末尾时，你所做的就是调用它（执行它）。当你想通过它时，你必须这样做：

<Users deleteUser={this.deleteUser} users={this.state.users}/>

我从 React 收到错误：超出最大更新深度

I get an Error from React: Maximum update depth exceeded

javascript

components

state

reactjs

react-context