反应：在useEffect

Question

我有一个功能组件，可以从Redux接收道具。在Redux中，我有一个供加载用户使用的功能，我想做的是在组件启动时在下拉菜单中加载用户，它发生在当前代码中，但是控制台中会出现以下警告：

我的代码：

function GroupInfo(props) {

    useEffect(() => {
        props.requestLoadUsers()
    }, [])

    return  (    
         <form className="mx-5 mt-5">         
              <div className="btn-group dropdownUsuario">
                   <div className="dropdown-menu">
                       { props.users.map(user => {
                           return (
                               <button
                                   key={user.id}
                                   className="dropdown-item" 
                                   type="button">

                                   {user.firstName}
                               </button>
                           )
                       }) }
                   </div>
              </div>
       </form>
    )
}

const mapStateToProps = state => {
    return {
        selectedGroup: state.group.selectedGroup,
        users: state.groupInfo.users.rows
    }
}
const mapDispatchToProps = dispatch => {
    return {
        requestLoadUsers: () => dispatch(requestLoadUsers())
    }
}
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(GroupInfo)

如果我将“ props”放在方括号内，警告消失了，但是我的组件每次都开始发出请求，因为它将更新道具的每次更改，例如：

useEffect(() => {
  props.requestLoadUsers()
}, [props])

ps：我也尝试过[props.requestLoadUsers]，但警告仍然出现

如何避免警告发出无限请求？

Answer 1

破坏道具，因此您可以将组件更改为此：

function GroupInfo({requestLoadUsers, ...props}) {
    useEffect(() => {
        requestLoadUsers();
    }, [requestLoadUsers]);

    return (
        <form className="mx-5 mt-5">
            <div className="btn-group dropdownUsuario">
                <div className="dropdown-menu">
                    {props.users.map(user => {
                        return (
                            <button key={user.id} className="dropdown-item" type="button">
                                {user.firstName}
                            </button>
                        );
                    })}
                </div>
            </div>
        </form>
    );
}