React async/await 用法 - 未处理的拒绝（TypeError）：无法读取未定义的属性（读取“then”）

Question

我正在使用化简器将数据添加到 addItem 数组。

我想等到项目实际添加后再继续。我已经实现了它，如下所示，

const [addItems, dispatch] = useReducer((state, action) => {
  switch (action.type) {
    case 'add':
      return [
        ...state,
        {
          id: state.length,
          data: action.data
        }
      ];
    default:
      return state;
  }
}, []);

const linkDataHandler = async(samplesData, test, e) => {
    
    const isSelected =  e.target.checked;

    await callDispatch(samplesData.id, test.testList.id, isSelected) 
    .then( r =>{
    //do something
    }});
  
    };

const callDispatch = (sampleId, testId, checked) => {
      
      const linkedData = {
        sampleId: sampleId,
        TestId: testId,
        isSelected: checked
      };
  
      dispatch({
        type: "add",
        data: linkedData
      });
    };

在复选框 onChange() 事件上调用函数 linkDataHandler 。

它正在给我

未处理的拒绝（TypeError）：无法读取未定义的属性（读取“then”）

Answer 1

我已经重写了 callDispatch 如下。因为预计会返回一个承诺

const callDispatch = (sampleId, testId, checked) => {
               

      const linkedData = {
        sampleId: sampleId,
        TestId: testId,
        isSelected: checked
      };
  
      return Promise.resolve(
      dispatch({
        type: "add",
        data: linkedData
      }));
    };