Question

我使用React钩子已有一段时间，但是我遇到了使用输入类型文件更新组件的问题。这是代码：

  const [files, setFiles] = useState([]);
  const fileInputRef = [];
  Array.from(Array(FILES_QUANTITY)).map(x => 
  fileInputRef.push(React.createRef()));

 return (
    <div className="buttons-div">
      {Array.from(Array(FILES_QUANTITY)).map((f, index) => (
        <div key={index} className="buttons-input">
          {console.log(index, files[index])}
          <Button
            content={files[index] ? files[index].name : 'Choose a file'}
            labelPosition="left"
            icon="file"
            onClick={() => fileInputRef[index].current.click()}
          />
          {filesName[index]}
          <input ref={fileInputRef[index]} type="file" hidden onChange={e => fileChange(e, index)} accept=".pdf" />
        </div>
      ))}
      <ButtonActions />
    </div>
  );

因此，基本上，当我在输入中更改文件时，我希望按钮的内容随文件名一起更改。尽管控制台显示了正确的名称，但按钮组件没有得到更新。

有什么想法吗？

Answer 1

只需回答我自己的问题，问题就出在我试图更新状态时。这就是问题所在：Javascript //错误的const updateFiles = files; //右边的const updateFiles = [... files]; updateFiles [buttonIndex] = {名称：file.name，结果：event.target.result}; setFiles（updateFiles）;

React挂钩正在更新状态，但是组件未更新

1 个答案: