React：如何正确更新状态数组？ setState(state.concat(array)) 不工作

Question

问题：

我无法通过它的值更新 useState，React Native 中的数组

背景：

我开发录音app，我想保留最后5秒，每2.5秒更新一次：

[旧音频数据]（5 秒）和[新音频数据]（2.5 秒）

->（裁剪前 2.5 秒的旧音频数据）

[旧音频数据]（过去 2.5 秒）+[新音频数据]（2.5 秒）

import React, {useState, useEffect, useRef} from 'react';
import Recording from 'react-native-recording';

const App = () => {
  const [signals, setSignals] = useState<number[]>(new Array(24000 * 5).fill(0));

  Recording.init({
    bufferSize: 24000 * 2.5,
    sampleRate: 24000,
    bitsPerChannel: 16,
    channelsPerFrame: 1,
  });

  useEffect(() => {
    console.log('start effect');
    const listener = Recording.addRecordingEventListener((data: number[]) => {
      const newSignals = signals.slice(signals.length - data.length, signals.length).concat(data);
      setSignals(newSignals);  // this doesn't work, but setSignals(new Array(24000 * 5).fill(1)) work. Why?
    });
    console.log(signals);
    Recording.start();
    return () => {
      console.log('clean up');
      Recording.stop();
      listener.remove();
    };
  }, []);

  return (...
  );
};

console.log 显示

[0, 0, 0, 0, ..., -42, 64, 78]
[0, 0, 0, 0, ..., 12, 22, 132]
[0, 0, 0, 0, ..., 10, -222, 121]

Answer 1

更新时应该使用之前的状态。

const newSignals = signals.slice(signals.length - data.length, signals.length).concat(data);
setSignals(newSignals); 

收件人：

setSignals(prev => prev.slice(signals.length - data.length, signals.length).concat(data));