每次收到新的即将推出的 Prop 时,我都想更改本地状态。为此,我使用 Recompose
库中的 lifecycle
HOC。但事情并不像我想象的那么简单。我要么永远设置该值,要么在使用回调时发生堆栈溢出。
import { connect } from 'react-redux';
import { withState, withProps, lifecycle, compose } from 'recompose';
import { selectors, testDelete, testSubscribe } from 'ducks/entities/tests';
import { Tests } from 'components/tests/all-tests';
export default compose(
connect(selectors.tests, {
onTestDelete: testDelete,
onTestSubscribe: testSubscribe,
}),
withState('isDeleteModalOpen', 'setDeleteModalShow', false),
withState('idToDelete', 'setIdToDelete', 0),
withProps(
({
tests,
idToDelete,
setIdToDelete,
setDeleteModalShow,
onTestDelete,
onTestSubscribe,
}) => ({
tests: tests.map((t) =>
t.merge({
onDeleteModalShow: () => {
setDeleteModalShow(true);
setIdToDelete(t.get('id'));
},
onSubscribe: () => onTestSubscribe(t.get('id')),
}),
),
onDeleteModalHide: () => setDeleteModalShow(false),
onDelete: () => onTestDelete(idToDelete),
}),
),
lifecycle({
componentWillReceiveProps({ setDeleteModalShow }) {
setDeleteModalShow(false); // Not workding "Maximum update depth exceeded"
this.setState({
isDeleteModalOpen: false,
}); // now working
},
}),
)(Tests);
最佳答案
有点老的问题,但答案相当简单。
如果您设置的值已经是您想要的值,请不要更改状态。在代码中,您可以更改 lifecycle
增强器来检查 isDeleteModalOpen
是否已经为 false,如下所示:
lifecycle({
componentWillReceiveProps({ setDeleteModalShow, isDeleteModalOpen }) {
if (isDeleteModalOpen) setDeleteModalShow(false);
},
}),
这样,您的 componentWillReceiveProps
函数将命中两次,并且第二次将不执行任何操作。
请注意,此组件上的任何 prop 更改都会将 isDeleteModalOpen
值设置为 false。
关于javascript - componentWillReceiveProps 生命周期内的 setState 重构 HOC,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48977299/