上下文API更新状态导致循环请求

Question

我有一些上下文。我在那里存储用户角色。

const RolesContext = createContext({roles: []});
function RolesContextProvider({children}) {
const [roles, setRoles] = useState([]);
async function check(newRoles) {
const missing = compareArrayWithArray(newRoles, roles);
if (missing.length !== 0) {
await User.roles(newRoles).then(((res) => {
const updatedRoles = roles.concat(res.data);
setRoles(updatedRoles);
}));
}
}
const defaultContext = {
roles,
check,
};
return (
<RolesContext.Provider value={defaultContext}>
{children}
</RolesContext.Provider>
);
}
export {RolesContext, RolesContextProvider};

启动组件时，我运行检查角色

export default function Users() {
const UsersComposition = compose(
connect(mapStateToProps, mapDispatchToProps)
)(ConnectedUsers);
const context = useContext(RolesContext);
const {roles, check} = context;
useEffect(() => {
check(['roles', 'to', 'check']);
}, [check]);
return <UsersComposition roles={roles}/>;
};

它的作用。。。应用程序因inifite更新状态循环而崩溃。它使用相同的有效负载发出数十个相同的请求。应该怎么做？谢谢你的建议。

Answer 1

为了修复无限循环，您需要在渲染之间保留check函数的标识。一种方法是用useRef保存它(您需要将现有角色作为第二个参数传递(：

const check = useRef(async (newRoles, roles) => {
...
});
const defaultContext = {
roles,
check: check.current,
};

您也可以考虑将Users实现为类组件，并在componentDidMount:中调用check

class Users extends React.Component {
static contextType = RolesContext;
componentDidMount() {
this.context.check(['roles', 'to', 'check']);
}
render() {
...
}
}

Answer 2

您似乎在循环中调用check。看看我说得对不对。

• RolesContextProvider提供上下文roles和check
• Users访问上下文并调用check
• Check用setRoles更新RolesContextProvider中的roles
• setRoles触发RolesContextProvider中的更新，从而改变上下文
• 并且上下文更改更新Users
• 循环重复