状态返回一个空数组，即使在use中设置

Question

我在SO上看到过类似的问题，但无法确定我遇到的问题。

我有一个useState变量，在第一次加载时在useEffect中设置。然后，在很晚的时间触发一个事件，在事件中我检查变量的值，它总是一个空数组[]。但是，我添加了第二个useEffect来跟踪状态变量中的更改，我看不到它在哪里被清空。下面是一些代码来突出我的问题：

import React, { useState, useEffect } from "react";
import { DragAndDrop } from "../components";

const AddKidPage = () => {
  const [files, setFiles] = useState([]);

  useEffect(() => {
    var f = [
      "nice.pdf",
      "verycool.jpg",
      "amazing.png",
      "goodstuff.mp3",
      "thankyou.doc",
    ];

    setFiles(f);
  }, []);

  useEffect(() => {
    console.log(files);
  }, [files]);

  const handleDrop = (newFiles) => {
    let fileList = files;

    // HERE FILES = []

    for (var i = 0; i < newFiles.length; i++) {
      if (!newFiles[i].name) return;
      fileList.push(newFiles[i].name);
    }

    setFiles(fileList);
  };

  return (
    <main>
      <DragAndDrop handleDrop={handleDrop}>
        <div style={{ height: 300, width: 250 }}>
          {files.map((file, i) => (
            <div key={i}>{file}</div>
          ))}
        </div>
      </DragAndDrop>
    </main>
  );
};

export default AddKidPage;

我在跟踪useffect的文件中有1个console.log。以下是组件安装时的输出：

[]

[“nice.pdf”、“verycool.jpg”、“sapping.png”、“goodstuff.mp3”、“thankyou.doc”]

这是有道理的-我初始化数组为空，然后我立即填充它的值，然后触发第二个输出。但是，这里是输出后，我删除一个文件（这会导致handleDrop（）执行）：

[“newFile.png”]

如您所见，所有其他值都被删除。我在代码“herefiles=[]”中的注释演示了文件useState在何处仍然为空，即使我的输出显示它已填充。useEffect不会第二次输出空数组，所以它在哪里被清空？我检索的值是否错误？非常感谢您对这个谜团的任何帮助。我选择不显示DragAndDrop组件的代码，但它看起来很可靠，并在正确的时间使用正确的值调用handleDrop方法。

编辑：

虽然DragAndDrop看起来很可靠，但这可能是我如何调用传入函数的某种问题。。。或者我对{children}的使用。我不确定。下面是DragAndDrop的代码，它完成了这个组件。

import React, { useState, useEffect } from "react";
import styled from "styled-components";

const DragAndDrop = ({ handleDrop: externalDrop, children }) => {
  const [drag, setDrag] = useState(false);
  const [dragCounter, setDragCounter] = useState(0);

  const handleDrag = (e) => {
    e.preventDefault();
    e.stopPropagation();
  };

  const handleDragIn = (e) => {
    e.preventDefault();
    e.stopPropagation();

    setDragCounter(dragCounter + 1);
    if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
      setDrag(true);
    }
  };

  const handleDragOut = (e) => {
    e.preventDefault();
    e.stopPropagation();

    setDragCounter(dragCounter - 1);
    if (dragCounter - 1 === 0) {
      setDrag(false);
    }
  };

  const handleDrop = (e) => {
    e.preventDefault();
    e.stopPropagation();

    setDrag(false);
    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
      externalDrop(e.dataTransfer.files);
      e.dataTransfer.clearData();
      setDragCounter(0);
    }
  };

  useEffect(() => {
    var div = document.getElementById("draganddrop-wrapper");

    div.addEventListener("dragenter", handleDragIn);
    div.addEventListener("dragleave", handleDragOut);
    div.addEventListener("dragover", handleDrag);
    div.addEventListener("drop", handleDrop);

    return () => {
      div.removeEventListener("dragenter", handleDragIn);
      div.removeEventListener("dragleave", handleDragOut);
      div.removeEventListener("dragover", handleDrag);
      div.removeEventListener("drop", handleDrop);
    };
  }, []);

  return (
    <Wrapper id="draganddrop-wrapper">
      {drag && (
        <div className="drag-hover">
          <div className="drag-overlay">
            <div>drop here</div>
          </div>
        </div>
      )}
      {children}
    </Wrapper>
  );
};

const Wrapper = styled.div`
  display: inline-block;
  position: relative;
  .drag-hover {
    border: dashed grey 4px;
    background: rgba(255, 255, 255, 0.8);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    .drag-overlay {
      position: absolute;
      top: 50%;
      right: 0;
      left: 0;
      text-align: center;
      color: grey;
      font-size: 36px;
    }
  }
`;

export default DragAndDrop;

Answer 1

这是因为您正在变异文件变量，而不是克隆它。

改变

let fileList = files;

到

const fileList = [...files];

使现代化

const handleDrop = useCallback((newFile) => {
    if (newFile.type === "image/png") {
        setFile(newFile.name);
    }
}, []);

代码沙盒