如何使用asynchronous函数？
目前正在开发一个从客户端服务器向后端服务器发出axios请求的应用程序。
有时候应用程序更新正确，有时会滞后/不会更新，直到下一个请求。 任何想法为什么？
我的代码有什么问题吗？ 我会尝试添加相关的所有内容。
该应用程序是一个购物清单，用户可以通过Google oauth简单login。 然后，他们从React State和MongoDB数据库中添加/删除项目。
每次添加/删除项目时，都会从数据库中提取列表的状态。
应用组件
import React from 'react'; import ListForm from './ListForm'; import ListItem from './ListItem'; import * as helpers from '../helpers'; class App extends React.Component{ state = { currentUser: {}, items: [] } componentDidMount() { helpers.fetchUser() .then(data => { this.setState({ currentUser: data, items: data.shoppingList }, () => { console.log(this.state) }); }); } // Handle adding new items onSubmit = (item) => { this.setState({items: this.state.items.concat([item])}); helpers.addItem(item) .then( helpers.fetchUser() .then(data => { this.setState({ currentUser: data, items: data.shoppingList }, () => { console.log(this.state); }); }) ) } // Handle deletion of items onDelete = (deleteItem) => { helpers.removeItem(deleteItem) .then( helpers.fetchUser() .then(data => { this.setState({ currentUser: data, items: data.shoppingList }, () => { console.log(this.state); }) }) ) } renderContent = () => { const shoppingList = this.state.currentUser.shoppingList; const currentUser = this.state.currentUser; if(!currentUser.googleId) { return ( <div className="row justify-content-center"> <div> <a href="/auth/google" className="btn btn-primary"><i className="fa fa-google" /> Sign in with Google</a> </div> </div> ); } else if(shoppingList === undefined || shoppingList.length < 1) { return ( <div className="row justify-content-center"> <h5>Add your first item!</h5> </div> ); } else { return ( <div> {this.state.items.map((item, index) => <ListItem {...item} key={index} id={index} currentUser={this.state.currentUser} onDelete={this.onDelete} /> )} </div> ); } } render() { return ( <div className="container row offset-4"> <div className="jumbotron col-sm-6"> <ListForm currentUser={this.state.currentUser} items={this.state.items} onSubmit={this.onSubmit} /> {this.renderContent()} </div> </div> ); } }; export default App; 列表组件
import React from 'react'; class ListForm extends React.Component { state = { value: '' } // Handle the submission of a new item to database and state. handleSubmit = e => { e.preventDefault(); this.props.onSubmit({name: this.state.value}); this.setState(prevState => ({value: ''})); } // Handle any changes within the input. onChange = e => { this.setState({value: e.target.value}); } render() { return ( <div className="col-xs-9"> <h3>Grocery List</h3> <form className="form-control" onSubmit={this.handleSubmit}> <input style={{display: "inline", width: "60%", height: "2em"}} className="form-control" type="text" value={this.state.value} onChange={this.onChange} required /> <button className="btn btn-success btn-sm float-right">Add item</button> </form> <div style={{marginTop: "10%"}}> </div> </div> ); } } export default ListForm;
Helpers.js（如果有请求）
import axios from 'axios'; export const fetchUser = async () => { const resp = await axios.get('/api/current_user'); return resp.data; } export const addItem = async (newItem) => { const resp = await axios.post("/api/addItem", newItem); return resp.data; } export const removeItem = async (deleteItem) => { axios.delete("/api/removeItem", {data: {item: deleteItem}}); }
涉及用户数据的路由
const mongoose = require('mongoose'); const User = require('../models/userSchema'); module.exports = (app) => { app.post('/api/addItem', async (req, res) => { const item = await req.body; req.user.shoppingList.push(item); req.user.save(); console.log(req.user); res.send(item); }); app.delete('/api/removeItem', (req, res) => { const itemName = req.body.item; console.log(itemName); const index = req.user.shoppingList.findIndex(i => i.name === itemName); console.log(index); req.user.shoppingList.splice(index, 1); req.user.save(); console.log(req.user); res.send(itemName); }); };
请让我知道，如果我需要添加任何东西，为了更清楚！
在查看代码时很难说，因为在.catch .then()之后没有.catch子句。 那将是第一个检查的地方：如果你的请求有时失败怎么办？ 另外React devtools扩展对于在运行时检查状态是很好的 – 如果这不是一个承诺问题，那么你肯定可以用它来固定它。