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

如何在useEffect中使用变量而不将它们置于依赖关系中？

1 个答案: