如何将文件url字段(Firestore存储)与Firestore中的其他字段连接起来?(反应)

Question

我正在尝试：

• 上传图片到firebase存储
• 在"articles"文档下的Firestore中创建字段"fileUrl">
• 参考Firestore中的文档，以便每个图像都知道它被分配给了哪篇文章

我在某种程度上做到了这一切，但问题是，当我提交带有标题、内容和图像的表单时，它会在Firestore中创建一个只有图像("fileUrl"(的新文档，而不是创建一个包含表单其余数据的文档。

我知道这可能是因为在我的UploadFile.js中我正在创建一个新文档，但我如何将UploadFile.js中创建的字段与AddArticle.js中的字段连接起来？

我还得到了"未处理的拒绝(TypeError(：无法读取此行的属性"state"of undefined：

firebase.firestore().collection('articles').doc(this.state.documentId).update({
fileUrl: fileUrl
})

UploadFile.js

import React from "react";
import firebase from '../Firebase';
function UploadFile() {
const [fileUrl, setFileUrl] = React.useState(null);
const onFileChange = async (e) => {
const file = e.target.files[0]
const storageRef = firebase.storage().ref()
const fileRef = storageRef.child(file.name)
await fileRef.put(file);
setFileUrl(await fileRef.getDownloadURL().then(fileUrl => {
firebase.firestore().collection('articles').doc(this.state.documentId).update({
fileUrl: fileUrl
})
.then(() => {
setFileUrl('')
})
} ));
};
return (
<>
<input type="file" onChange={onFileChange} />
<div>
<img width="100" height="100" src={fileUrl} alt=''/>

</div>
</>
);
}
export default UploadFile;

AddArticle.js

import React, { Component } from 'react';
import firebase from '../Firebase';
import UploadFile from '../components/UploadFile';
class AddArticle extends Component {
constructor() {
super();
this.ref = firebase.firestore().collection('articles');
this.state = {
title: '',
content: '',
fileUrl: ''
};
}
onChange = (e) => {
const state = this.state
state[e.target.name] = e.target.value;
this.setState(state);
}

onSubmit = (e) => {
e.preventDefault();
const { title, content, fileUrl } = this.state;
this.ref.add({
title,
content,
fileUrl
}).then((docRef) => {
this.setState({
title: '',
content: '',
fileUrl: '',
documentId: docRef.id
});

this.props.history.push("/")
})
.catch((error) => {
console.error("Error adding document: ", error);
});
}
render() {
const { title, content, fileUrl } = this.state;
return (
<div className="container">
<br></br><br></br><br></br>
<div className="panel panel-default">
<div className="panel-heading">
<h3 className="panel-title text-center">
Create a new article
</h3>
</div>
<br></br><br></br>
<div className="panel-body">
<form onSubmit={this.onSubmit}>
<div className="form-group">
<label for="title">Title:</label>
<input type="text" className="form-control" name="title" value={title} onChange={this.onChange} placeholder="Title" />
</div>
<div className="form-group">
<label for="content">Content:</label>
<textArea className="form-control" name="content" onChange={this.onChange} placeholder="Content" cols="80" rows="20">{content}</textArea>
</div>

{/* <input type="file" onChange={this.onFileChange} /> */}
<UploadFile onChange={this.onChange} value={fileUrl}/>
<button type="submit" className="btn btn-success">Submit</button>
</form>
</div>
</div>
</div>
);
}
}
export default AddArticle;

Answer 1

每次调用firebase.firestore().collection('articles').add(...)时，都会向数据库中添加一个新文档。由于您在AddArticle和UploadFile中都调用了它，因此您的图像URL和其他字段确实会出现在单独的文档中。

你处理文件上传的方式对我来说有点不寻常，因为我通常认为上传会在其他字段也提交时进行。正如J.A.Hernández也评论的那样，现在我还不清楚这张照片属于什么。

无论哪种方式：您都需要删除其中一个firebase.firestore().collection('articles').add(...)调用，并将文档ID传递到该调用中。假设您首先添加文本字段并，然后上传图像，UploadFile可以使用更新文档

firebase.firestore().collection('articles').doc(documentId).update({
fileUrl: fileUrl
})

---

从to传递文档ID的一种方法是将其保持在状态：

this.ref.add({
title,
content,
fileUrl
}).then((docRef) => {
this.setState({
title: '',
content: '',
fileUrl: '',
documentId: docRef.id
});

this.props.history.push("/")
})

然后：

firebase.firestore().collection('articles').doc(this.state.documentId).update({
fileUrl: fileUrl
})