有没有办法在每个 onClick 事件做出反应后刷新状态？答案

【问题标题】：is there a way to refresh the state after each onClick event in react?有没有办法在每个 onClick 事件做出反应后刷新状态？
【发布时间】：2020-05-17 04:12:15
【问题描述】：

我正在尝试获取 json 对象的列表，例如：

[ {yes: 1, no: 0, nil: 0},
 {yes: 0, no: 1, nil: 0}, 
{yes: 1, no: 0, nil: 0},
 {yes: 0, no: 1, nil: 0}].

然而，目前，一旦我点击上面的任何一个，它就会保持为 1，最终全部变为 1，这不是我想要的：

[ {yes: 1, no: 0, nil: 0},
     {yes: 1, no: 1, nil: 0}, 
    {yes: 1, no: 1, nil:0 },
     {yes: 1, no: 1, nil: 1}]

对于每次点击，我想将状态推送到 firebase 数据库，然后从应用程序中将其作为 json 对象检索以绘制图表。

export default class Vote extends Component {
constructor(props) {
  super(props)
  this.state = {
     yes: 0,
     no: 0,
     nil: 0,
  };
  this.current = [];
};
handleClick = (e) => {
    const ref = baseDb
        .ref("votes")
        ref.push({
            dataset: this.state
        })
    this.setState({[e.target.name]: 1 })
    this.current.push(this.state) 
    console.log(this.current)    
}

<div className="form-group row">
                        <div>
                            <button  className="btn btn-primary" onClick={this.handleClick}
                            name= "yes"
                            >
                            Yes
                            </button>
                        </div>
                        <div>
                            <button className="btn btn-primary" onClick={this.handleClick}
                            name= "no"
                            >
                            NO
                            </button>
                        </div>
                        <div>
                            <button className="btn btn-primary" onClick={this.handleClick}
                            name= "nil"
                            >
                            Undecided
                            </button>
                        </div>
                    </div>

【问题讨论】：

你可以使用this.setState(<initial state>)
这个我试过了，没用！
这段代码有什么问题？你的用户界面没有更新吗？还是数据库中的数据不是你所期望的？
它的用户界面。对于每次点击，我希望所有状态值都回到 0，但它会保持为 1。
你能澄清一下你想在问题中发生什么吗？您想在点击时更新 Firestore，但在点击时重置状态？这有点难以理解，如果你用一个你想要发生的例子来澄清和更新你的问题，它会更容易帮助你。

标签： javascript reactjs firebase express react-redux

【解决方案1】：

State 以异步方式工作，如果您在立即设置状态后将状态推送到 this.current，则当时可能不会设置状态，最好在 componentDidUpdate 挂钩中进行推送，这将等到状态被修改并重新渲染组件

【讨论】：

虽然我之前尝试过但没有成功，但我只是使用'this.current'来检查控制台。目标是将其直接推送到 firebase，如代码所示。

【解决方案2】：

感谢大家的贡献，我可以使用 async 和 await 来解决问题，如下所示：

export default class Vote extends Component {
constructor(props) {
  super(props)
  this.state = {
     yes: 0,
     no: 0,
     nil: 0,
  };
  this.current = [];
};

handleClick = async (e) => {

        await this.setState({[e.target.name]: 1 })

        const ref = baseDb
        .ref("dataset")
        ref.push({
            voter: this.state
        })
    this.current.push(this.state) 
    console.log(this.current) 
    this.setState({ yes: 0, no: 0, nil: 0 })
}

【讨论】：