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

Question

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

应用程序.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;

用户.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&nbsp;deleteUser={this.deleteUser()}&nbsp;users={this.state.users}/>当您将其放在()函数末尾时，您所做的就是调用它（执行它）。当你想通过它时，你必须这样做：<Users&nbsp;deleteUser={this.deleteUser}&nbsp;users={this.state.users}/>