Reactjs 我如何使用useffect中的变量而不将它们包含在依赖项中?
我有一个objectList和一个size变量Reactjs 我如何使用useffect中的变量而不将它们包含在依赖项中?,reactjs,react-hooks,use-effect,Reactjs,React Hooks,Use Effect,我有一个objectList和一个size变量 const [objectList, setObjectList] = useState([]); //will be filled elsewhere const [size, setSize] = useState([props.width, props.height]); //might change on user input useEffect(() => { //When size changes iterate ove
const [objectList, setObjectList] = useState([]); //will be filled elsewhere
const [size, setSize] = useState([props.width, props.height]); //might change on user input
useEffect(() => {
//When size changes iterate over objectList
objectList.forEach(object => {
object.set({
width: size.width,
height: size.height
);
});
}, [size]);
在这里,React抱怨说,objectList不在依赖关系中,因为我可能希望依赖于objectList更改的useEffect。但是我没有。偶尔可以将对象添加到列表中,但在本例中,我正在设置将对象添加到列表中的大小。当我向列表中添加一个新对象(objectList已更改)时,我不希望迭代每个对象,仅当大小更改时
如何在每次大小更改时迭代objectList,而不是在objectList更改时迭代?似乎有两个操作会影响
objectList
:在大小更改和添加新对象时。您需要将这两个操作分开
您可以通过管理不同的操作来实现这一点
const initialState = {
objectList: []
}
function reducer(state, action) {
switch (action.type) {
case 'ADD_OBJECT': /* TODO */ return;
case 'UPDATE_SIZE': {
const { size } = action.payload;
return state.objectList.map((o) => ({
...o,
width: size.width,
height: size.height
}))
}
default: /* TODO */;
}
}
function App(props) {
const [state, dispatch] = useReducer(reducer, initialState);
useEffect(() => {
dispatch({
type: 'UPDATE_SIZE',
payload: {
size: {
width: props.width,
height: props.height
}
}
});
}, [props.size]);
}
嗯,如果我有一个onSizeChanged函数,我无论如何都可以在objectList上迭代,即使不使用缩减器,不是吗?但是当我想在useEffect函数中使用它时,这是行不通的。我刚刚看到你最近更新了关于
props.width
等的内容。无论如何,这是一种反模式,如果父组件和子组件也更新了这些道具,则使用props.width
等作为初始状态。好的,这是可能的,但是是否有替代方案?我没有在我的应用程序中使用useReducer。将整个应用程序更改为useReducer需要相当多的重构工作。我将示例提取得更抽象,因为我不能在这里发布整个应用程序代码。唯一的区别是如何更新objectList
,它是通过setObjectList
而不是通过setObjectList
发送操作,访问objectList
只是添加state
类似state.objectList
。我认为只要有两个操作影响objectList
,重构就不会太多。如果是的话,我闻到了别的味道。我意识到useReducer可能是这里的最佳实践,我一直想重构到useReducer,但是我想快速添加这个功能,这个应用程序需要相当多的返工,因为我在学习的同时编写它。它像现在一样工作,需要重构,但现在时间有限。这就是为什么我想看看是否可以在这里使用useEffect。我现在有了一个解决办法,我将objectList本地放入一个const objects
,但当我有时间清理和重构所有内容时,我会回到您的答案上来。因此,我检查答案是否正确。