javascript - react 状态没有在 useEffect() 上给出正确的值

Question

我正在尝试使用 react 构建分解算法。 我想添加 results至LocalStorage基于分解的结果 .但是，LocalStorage设置以前的结果而不是当前的结果。
我认为这是因为 useEffect在每个新的 [number] 上运行(=用户输入)而不是基于 [results] .但是，我需要 useEffect在新的用户输入提交上运行，因为那是必须触发分解的时候。
我怎么做localStorage在分解完成后设置正确的结果(如果可能，在 finally block 上)？

const [results, setResults] = useState({
  default: [],
  detailed: [],
  isPrime: '',
});

const { number } = props

useEffect(() => {
  handleWorker(number);
  //accessing results here will give previous results
}, [number]);

const handleWorker = number => {
  try {
    const worker = new Worker(new URL('facto.js', import.meta.url));
    worker.postMessage({ number, algorithm });
    worker.onmessage = ({ data: { facto } }) => {
      setResults({ ...facto });
      //the worker 'streams live' results and updates them on setResults
    };
  } catch(error) {
    console.log(error.message)
  } finally {
    localStorage.setItem(number, results)
    //here, results is not current state but previous one
  }
};

请注意，其他一切正常
谢谢

Answer 1

你得到以前的值是因为 localStorage.setItem在 setResults 之前执行更新状态。你可以做一些重构来使它工作:

const [results, setResults] = useState({
  default: [],
  detailed: [],
  isPrime: '',
});

const { number } = props;
const workerRef = useRef(new Worker(new URL('facto.js', import.meta.url)));
const worker = workerRef.current;

useEffect(()=> {
    //-> create the listener just once
    worker.onmessage = ({ data: { facto } }) => {
      setResults({ ...facto }); 
    };
}, []);

useEffect(() => {
   //-> send message if number changed
   worker.postMessage({ number, algorithm });
}, [number]);

useEffect(() => {
   //-> update localStorage if results changed
   localStorage.setItem(number, results)
}, [results]);