Promise async/await 不起作用 - 数组未更新

Question

单击复选框后，我会立即使用 action/reducer 和 dispatch 更新数组 addItems，但是当我检查数组时，它不是最新的。为了解决这个问题，我引入了 async/await 承诺（我是承诺的新手），但是当我签入时，数组仍然没有更新！我缺少什么？

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

const callDispatch = (sampleId, testId, checked) => {
      console.log("sample: " + sampleId + " t: " + testId + " bool: " + checked);          

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

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

    await callDispatch(samplesData.id, test.testList.id, isSelected) 
    .then( r =>{
        //addItems is still not updated when checked here
    }})
    .catch(error => console.log(error));

 <input
    type="checkbox"
    onClick={(e) => {
      linkDataHandler(sampleObj, testObj, e);
    }}
  />

工作示例： https://codesandbox.io/s /staging-moon-xv1ku5?file=/src/App.js

Sol1: 尝试使用回调如下但不起作用

import React, { useReducer, useEffect, useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import { useRef } from "react";

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

  const linkDataHandler = (samplesData, test, e) => {
  const isSelected = e.target.checked;
  console.log(isSelected);
  callDispatch(samplesData, test, isSelected, (user) => {
  console.log(addItems);
  });
};
const callDispatch = (sampleId, testId, checked, callback) => {
const linkedData = {
  sampleId: sampleId,
  TestId: testId,
  isSelected: checked
};

callback(
  dispatch({
    type: "add",
    data: linkedData
  })
);
};

return (
<div className="App">
  <h1>Hello CodeSandbox</h1>
  <input
    type="checkbox"
    onClick={(e) => {
      linkDataHandler(1, 1, e);
    }}
  />
  ABC
</div>
);
}

Sol2：尝试添加useeffect

useEffect(() => {
console.log(addItems.length);
  }, addItems);

传递给 useEffect 的最后一个参数更改了渲染之间的大小。该数组的顺序和大小必须保持不变。