Question

所以我正在我的React应用程序上工作，有一点我需要上传一些文件。因此，我只是使用input file 使其起作用。我没有设置它的显示，因为我想在上传文件时单击附件图标。

问题：使用ref方法，除了一件事情之外，其他所有东西都工作正常，这在我的hangleFileChange函数中，当setFiles（）设置文件变量时，该组件未呈现，并且看不到文件数组。但是如果我只是像

那样保存文件

setFile(event.target.files[0])

我可以看到渲染图。但是使用下面的代码，该组件无法呈现

import React, { useRef, useState } from "react";
const App = () => {
  const fileInput = useRef(null);
  const [file, setFile] = useState([]);

  const handleClick = () => {
    fileInput.current.click();
  };

  const handleFileChange = (event) => {
    console.log("Make something");
    let newFiles = file;
    newFiles.push(event.target.files[0]);
    console.log(newFiles);
    setFile(newFiles);
  };

  // This should run on every render
  console.log("the files array is ", file);
  return (
    <div className="patientactions-container">
      <input
        type="file"
        style={{ display: "none" }}
        onChange={(e) => handleFileChange(e)}
        ref={fileInput}
      />
      <div onClick={() => handleClick()}>clck</div>
    </div>
  );
};
export default App;

请帮助。

沙盒：https://codesandbox.io/s/kind-breeze-czc3w?file=/src/App.js:0-692

Answer 1

尝试此版本

const handleFileChange = (event) => {
    console.log("Make something");
    // Set the ne variable to an array, not file
    let ne = [];
    ne.push(event.target.files[0]);
    // then set it equals file.
    ne = file;
    console.log(ne);
    console.log(file);
    setFile(file);
  };

Answer 2

您可以在下面修复如下代码。

import React, { useRef, useState } from "react";
const App = () => {
  const fileInput = useRef(null);
  const [file, setFile] = useState(null);

  const handleClick = () => {
    fileInput.current.click();
  };

  const handleFileChange = (nfile) => {
    console.log("Make something");
    if (file == null) setFile([nfile]);
    else setFile([...file, nfile]);
  };
  console.log("the files array", file);
  return (
    <div className="patientactions-container">
      <input
        type="file"
        style={{ display: "none" }}
        onChange={(e) => handleFileChange(e.target.files[0])}
        ref={fileInput}
      />
      <div onClick={() => handleClick()}>clck</div>
    </div>
  );
};
export default App;

Answer 3

我会在评论中输入这个，但是我的代表不够高。

我在渲染对数组的更改时遇到问题，因为数组使用指针，但它并未“注册”足以引起渲染的状态更改。在解决方案中使用散布运算符会影响指针，因此会发生渲染。

在我自己的解决方案中，我在添加内容之前将数组设置为null，这对于我的问题很好用。

SetState不呈现组件

3 个答案: