Question

我想使用useEffect异步更新数组中对象的属性，但是，我找不到以某种方式有效地实现它的正确方法：

下面的代码的问题是，当第一个异步操作完成时，由于缩减程序更新了elements数组，因此再次调用了效果。

然后，即使正在进行异步调用，也会对所有其他元素再次执行异步调用。

此外，始终不停地遍历数组的所有元素以知道哪个元素应该触发异步操作，这是非常低效的。

任何帮助将不胜感激！谢谢！

const annotationsReducer = (state, action) => {
  switch (action.type) {
    // update target element in state
    case 'DONE':
      return {...state, state.elements!.map((item, i) =>
          item.id === action.value.element.id ?
          {...item, done: action.value.done } : item
        )}
    default:
      return {...state};
}

// initialize state
const [state, dispatch] = useReducer(
  annotationsReducer,
  { elements:[
      {id: 0, done: false},
      {id: 1, done: false},
    ]
  });

const updateProperty = async (element) => {
  await slowAsyncOperation();
  dispatch({type: 'DONE', value: {element, done:true}});
}

updatePropertyEffect = () => {
  state.elements.forEach(element => {
    if (!element.done) {
      updateProperty(element);
    }
  })
}

useEffect(updatePropertyEffect, state.elements);

使用useEffect异步更新数组中对象的属性

0 个答案: