setState를 사용하여 어레이를 재설정할 수 없는 이유는 무엇입니까?

Question

내 카메라 구성요소에서 세 번째 사진마다 사진을 버킷에 업로드하고 싶습니다. 저는 React에서 상태를 사용하여 이미지 blob을 배열에 저장하고 있습니다. 처음 3장의 사진은 모든 것이 잘 작동하지만 그 후에는 배열을 비우도록 재설정할 수 없으며 겉으로 보기에는 임의의 수의 사진이 내 버킷에 업로드됩니다.

 let [blobs, setBlobs] = useState([]);

  const CapturePhoto = 비동기 () =>
    const photo = 카메라를 기다립니다.current.takePhoto();
    가져오기(사진.경로)
      .then(res => {
        setBlobs([...blobs, res._bodyBlob]);
        console.log('blobs', blobs.length, blobs);
      })
      .catch(err => {
        console.log('err', err);
      });
    checkLength();
  };

  const checkLength = 비동기 () =>
    if (blobs.length >= 2) {
      // Firebase 클라우드 버킷에 있는 현재 날짜의 폴더에 파일을 업로드합니다.
      const datestring = new Date().toLocaleString('de-DE');
      blobs.forEach((blob, i) => {
        uploadFile(blob, 날짜 문자열 + '/' + (i + 1) + '.jpg');
      });
      // 상태 재설정
      setBlobs([]);
      sendNotification('업로드된 사진');
      토글대화상자();
    }
  };

콘솔을 통해 배열을 기록했는데 크기만 늘어났습니다. 또한 요소를 추가했는데도 처음부터 콘솔 로깅이 시작됩니다. 아마도 setState() 약속으로 포장하여 재설정을 기다리려고 했지만 안타깝게도 그것도 작동하지 않았습니다. 3개의 Blob이 있으면 어떻게 클라우드에 업로드하고 나중에 목록을 재설정합니까?

Answer 1

따라서 코드가 실행되는 방식, 특히 setState의 콜백 형식을 사용할 수 있도록 setState의 비동기 특성에 따라 달라집니다. 예는 다음과 같습니다.

으아악

다음은 나머지 코드가 포함된 전체 예입니다.

으아악

Answer 2

다음 세 가지처럼 보입니다.

1. 가져오기 호출을 기다리지 않고 가져오기가 완료되기 전에 checkLength 호출합니다.
2. 다음 렌더링까지 setState 的新值。这是 React 的基本思想（是否是个好主意还有待商榷），状态值在渲染期间是不可变的。 setState를 얻지 못하고 다음 렌더링에서 사용될 다음 불변 상태만 얻습니다.
3. WhensetState依赖于先前的状态时，您应该将回调传递给setState，而不是直接使用当前值。举个例子，假设你有一个空数组，你调用 fetch 一次，然后在第一个数组完成之前再次调用 fetch 。在执行 ...blob 时，这两个 setState 调用都会引用空数组。通过传递回调，setState 매개변수로 전달된 최신 값을 가져옵니다. 추가 정보: https://react.dev/reference/react/Component#setstate

가장 간단한 해결책은 배열을 setState 콜백 내 setState 回调内的 checkLength에 매개변수로 전달하는 것입니다.

문제의 .then() 내용은 다음과 같습니다.

으아악

이것은async await

으아악

检查长度

으아악