如何将 API 数据保存到 MongoDB？答案

【问题标题】：How to save the API data to the MongoDB?如何将 API 数据保存到 MongoDB？
【发布时间】：2019-03-27 14:57:22
【问题描述】：

这是我的反应代码，用于显示来自 API 的所有数据。 Card 显示来自 API 的所有数组数据。

export default class Home extends Component{
      constructor() {
        super();
        this.state = {
        users:[],
        };
      }

 componentDidMount() {
   axios
   .get("http://localhost:5000/getNews1") 
   .then(response =>{
     this.setState({users:response.data.articles});
    })
 }

 handleSubmit(){}

     render(){
       const news = this.state.users.map((item, i) =>{
         return(
           <Col sm="4">
             <div key={i}>
               <Card id="size">
                 <CardImg top width="100%" src={item.urlToImage} alt={item.title} />
                <CardBody>
                  <CardTitle>{item.title}</CardTitle>
                  <CardSubtitle id="subtitle">{item.description}</CardSubtitle>
                  <CardText>{item.content}</CardText>
                  </CardBody>
                  <CardFooter>
                  <Button id="save_btn" onClick ={this.handleSubmit}>Save</Button>
                  <Button id="read-btn" href={item.url} target="_blank">Read More</Button>
                  </CardFooter>
                </Card>
                <br/>
               </div>
           </Col>
        )
       })   
      return(
       <div>
         <Container>
          <Row>
           {news}
          </Row>
         </Container>
        </div>
       )         
     }
   }

问题 1.如何通过点击保存按钮获取当前卡片数据。 2.获取当前卡片数据后，如何发布到后台服务器

【问题讨论】：

标签： reactjs express mongoose axios

【解决方案1】：

您不能直接从客户端访问 mongodb。您的handleSubmit 应该向您必须在服务器上定义/实现的某个端点发出“POST”请求。在这个处理程序中，您可以将数据（JSON？/表单数据？）写入 mongodb。

超简化代码：

// server.js // assuming express server app.post('/user', async (req, res) => { const payload = req.body await writeToDb(payload) return res.status(200) })

// client component handleSubmit = async () => { await fetch('/user', { method: 'POST' data: // something from this.state }) }

【讨论】：