反应如何在提交上存储状态值答案

【问题标题】：React how to store state value onSubmit反应如何在提交上存储状态值
【发布时间】：2020-09-25 22:21:21
【问题描述】：

我正在尝试在提交时将一个状态属性的值存储在另一个中，以便我可以将 URL 友好的 slug 提交到我的数据库。

以下是提交表单时调用的函数的一部分。目前，表单提交到数据库（Firestore）并且工作正常。但是，我需要收集用户输入到 streetAddress 的值，对其进行 slug 化，然后使用我所在州的 slug 属性将其作为自己的 slug 字段提交到我的数据库。

我的问题是我不知道该怎么做。我尝试了几种方法并将 slug 提交到数据库，但始终为空值。以下是我的尝试。

onSubmit = event => {
const {  reviewTitle, reviewContent, streetAddress, cityOrTown, 
        countyOrRegion, postcode, startDate, endDate, landlordOrAgent, rating, slug } = this.state;

this.setState({
    slug: streetAddress
})


// Creating batch to submit to multiple Firebase collections in one operation
var batch = this.props.firebase.db.batch();
var propertyRef = this.props.firebase.db.collection("property").doc();
var reviewRef = this.props.firebase.db.collection("reviews").doc();

batch.set(propertyRef, { streetAddress, cityOrTown,
    countyOrRegion, postcode, slug,
    uid });
batch.set(reviewRef, { startDate, endDate,
    reviewTitle, reviewContent, rating, 
    uid });
batch.commit().then(() => {
    this.setState({ ...INITIAL_STATE });
    });
    event.preventDefault();
};

谁能指出我正确的方向或告诉我我做错了什么？

【问题讨论】：

标签： reactjs google-cloud-firestore setstate

【解决方案1】：

this.setState 是一个异步函数。所以你可以做的是在状态更新后调用回调函数。

this.setState({
    slug: streetAddress
}, () => {
    // Creating batch to submit to multiple Firebase collections in one operation
    var batch = this.props.firebase.db.batch();
    var propertyRef = this.props.firebase.db.collection("property").doc();
    var reviewRef = this.props.firebase.db.collection("reviews").doc();

    batch.set(propertyRef, {
        streetAddress, cityOrTown,
        countyOrRegion, postcode, slug,
        uid
    });
    batch.set(reviewRef, {
        startDate, endDate,
        reviewTitle, reviewContent, rating,
        uid
    });
    batch.commit().then(() => {
        this.setState({ ...INITIAL_STATE });
    });
    event.preventDefault();
})

【讨论】：

感谢您的评论，这篇文章说 setState 不返回承诺 - stackoverflow.com/questions/53409325/…。 - 我还是有点迷茫。
是的。我更新了答案。您是否通过传递回调函数尝试过这种方式
我使用了不同的解决方案，一个变量来存储 streetAddress 的 slugified 结果，如下所示： // Creating property slug var slug = slugify(this.state.streetAddress); - 对我来说似乎更容易，然后我只需在提交到数据库时传入 slug 变量。