我有一个功能组件,可以从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]
,但警告仍然出现
如何避免警告发出无限请求?
答案 0 :(得分:2)
破坏道具,因此您可以将组件更改为此:
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>
);
}