Question

我正在尝试更新updateFile函数中的uploadFiles状态，当重新加载文件时，我正在用钩子重写此组件，但是在函数内部状态为空。

  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);

我希望该功能可以查看状态值。让我来操纵和设置状态。

Answer 1

可能还有其他问题，但是我注意到的一件事是：

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)
  });
});

Answer 2

更新的updateFiles函数：

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

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

如何查看函数中的状态？使用钩子

2 个答案: