如何在 useEffect 中使用变量而不将它们放在依赖项中？

Question

我有一个 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 over objectList
    objectList.forEach(object => {
        object.set({
            width: size.width,
            height: size.height
        );
    });
}, [size]);

这里 React 抱怨说 objectList 没有依赖关系，因为它可能是，我想将 useEffect 依赖于 objectList 更改。然而我没有。偶尔可以将对象添加到列表中，但在这种情况下，我正在设置将对象添加到列表的大小。当我将新对象添加到列表（objectList 已更改）时，我不想迭代每个对象，只有在大小更改时才迭代。

如何在每次大小更改时迭代 objectList 而不是在 objectList 更改时迭代？

Answer 1

似乎有两个动作会影响objectList：大小更改和添加新对象时。您需要将这两者分开。

您可以通过useReducer 来管理不同的操作。

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]);
}