Как я могу увидеть состояние внутри функции?используя крючки - PullRequest
Новая
       0

Как я могу увидеть состояние внутри функции?используя крючки

1 голос
/ 23 сентября 2019

Я пытаюсь обновить состояние uploadFiles внутри моей функции updateFile, при перезагрузке файла я перезаписываю этот компонент в хуках, но внутри функции состояние задается как пустое. 

  const [uploadedFiles, setUploadedFiles] = useState({
    slides: [],
    material: [],
  });

  const updateFile = useCallback(
    (id, data) => {
      const value = uploadedFiles.slides.map(uploadedFile => {
        return id === uploadedFile.id
          ? { ...uploadedFile, ...data }
          : uploadedFile;
      });

      console.log('value', value);
      console.log('uploadedFilesOnFunction', uploadedFiles);
    },
    [uploadedFiles]
  );

  function processUpload(upFile, type) {
    const data = new FormData();

    data.append('file', upFile.file, upFile.name);

    api
      .post('dropbox', data, {
        onUploadProgress: e => {
          const progress = parseInt(Math.round((e.loaded * 100) / e.total), 10);

          updateFile(upFile.id, {
            progress,
          });
        },
      })
      .then(response => {
        updateFile(upFile.id, {
          uploaded: true,
          id: response.data.id,
          url: response.data.url,
          type,
        });
      })
      .catch(response => {
        updateFile(upFile.id, {
          error: true,
        });
      });
  }

  function handleUpload(files, type) {
    const uploaded = files.map(file => ({
      file,
      id: uniqueId(),
      name: file.name,
      readableSize: filesize(file.size),
      preview: URL.createObjectURL(file),
      progress: 0,
      uploaded: false,
      error: false,
      url: null,
      type,
    }));
    setUploadedFiles({
      slides: uploadedFiles.slides.concat(uploaded),
    });
    uploaded.forEach(e => processUpload(e, type));
  }

  console.log('slides', uploadedFiles);

Я ожидал, что значения состояния будут просматриваться функцией.Для меня, чтобы манипулировать и установить состояние.

enter image description here

Ответы [ 2 ]

1 голос
/ 23 сентября 2019

Могут быть и другие проблемы, но я заметил одну вещь: 

const [uploadedFiles, setUploadedFiles] = useState({
  slides: [],
  material: [],
});

// A setState CALL FROM THE useState HOOK REPLACES THE STATE WITH THE NEW VALUE

setUploadedFiles({
  slides: uploadedFiles.slides.concat(uploaded),
});

От: https://reactjs.org/docs/hooks-state.html

Переменные состояния могутДержите объекты и массивы просто отлично, так что вы все равно можете группировать связанные данные.Однако, в отличие от this.setState в классе, обновление переменной состояния всегда заменяет ее, а не объединяет.

setState из ловушки useState необъединить государство.Потому что он может содержать любой тип значения, а не только объекты, как мы привыкли делать с классами.

Из вашего кода вы можете видеть, что вы стираете какое-то свойство из состояния при его обновлении.

Вместо этого следует использовать функциональную форму setState и получить доступ к текущему состоянию prevState, например: 

setUploadedFiles((prevState) => {
  return({
    ...prevState,
    slides: uploadedFiles.slides.concat(uploaded)
  });
});
0 голосов
/ 25 сентября 2019

Обновленная функция updateFiles: 

 const updateFile = (id, data) => {
    setUploadedFiles(prevState => {
      const newSlide = prevState.slides.map(slide => {
        return id === slide.id ? { ...slide, ...data } : slide;
      });

      return {
        ...prevState,
        slides: newSlide,
      };
    });
  };
...