有没有办法在React状态下存储文件？

Question

我正在一个项目中，我需要在组件状态下存储图像，以便可以将文件和附带的数据发送到另一个组件，该组件将数据上传到我的Firebase数据库，并将图像上传到我的Firestore。

我尝试通过使用提交图像时调用的函数以正常方式设置状态来实现。 但是我要传递文件的状态仍然为空。

初始状态：

state = {
    title: '',
    description: '',
    date: '',
    ticket: '',
    price: '',
    image: []
}

输入：

<input type="file" id="image" accept="image/*" onChange={this.handleChangeImage} />

应该处理我的问题的功能：

handleChangeImage = (e) => {
    const file = e.target.files[0];
    this.setState({
        [e.target.id]: file
    });
}

如果我在控制台上记录变量“文件”，则会得到该文件，但在控制台上记录state.image只会显示一个空数组。

Answer 1

尝试将您的handle函数更改为此：

handleChangeImage = (e) => {
  const file = e.target.files[0];
  const newImages = [...this.state.image];
  newImages.push(file);
  this.setState({
    image: newImages
  });
}

Answer 2

现在已解决此问题。 我是一个白痴。 我的问题不是不是未使用文件更新状态，而是问题是在使用文件更新状态之前发生了控制台日志输出。

状态总是用文件更新，但我从未意识到。

换句话说，这不是一个问题，只是一个愚蠢的新秀错误。