时间戳

首页 > 解决方案 > 使用 axios 将数据发布到 Mongo 数据库（React 前端）

reactjs - 使用 axios 将数据发布到 Mongo 数据库（React 前端）

问题描述

我正在从以前的项目（以前使用 Bootstrap 和 Socket）重新创建一个基本的聊天，这会解决我正在使用一个 React 组件来呈现聊天（它包括一个用户名的输入区域，一个文本内容的输入区域，以及插入的用户名和消息应该一起出现的 div，即“BugsBun01：“Whats up Doc？！”）。我不确定我是否应该将聊天内容所属的空 div 放在单独的 React 组件中（我的结尾目标是让父组件在将插入字段（用户名和文本内容）中的内容写入数据库集合时立即更新聊天区域）

我有 Mongo 数据库，其中包含聊天集合（用户名/消息），但我的问题是

A）如何使用 axios 将插入的用户名和文本存储在集合中，以及

B）一旦存储，我将如何允许父组件（React）立即将它们更新为 mongo 数据库中的空 div（chatArea），以便在页面刷新时，用户的旧聊天仍然存在？

我需要 componentDidMount() 吗？

我的 server.js 文件中是否需要任何中间件？（bodyparser等）

我对使用 React js 还很陌生，所以请耐心等待。这也是一个相当简单的聊天，专注于功能。 

class Chat extends React.Component {
    constructor(props){
        super(props);

        this.state = {
            username: '',
            message: '',
            messages: []
        };
    }

    render() {
        return (       
            <div  id="myChat">
                <div id="status"></div>
                <input type="text" id="username" class="form-control" placeholder="Enter Username..." value={this.state.username} onChange={ev => this.setState({username: ev.target.value})}>
                </input>
                <div id="chat">
                    <br></br>
                    <div class="card">
                        <div id="messages" class="card-block">
                            {this.state.messages.map(message => {
                                return (
                                    <div>{message.author}: {message.message}</div>
                                )
                            })}
                        </div>
                    </div>
                    <br></br>
                </div>
                <textarea id="textarea" class="form-control" placeholder="Enter message..." value={this.state.message} onChange={ev => this.setState({message: ev.target.value})} ></textarea>
            </div>
        );
    }
}

标签： reactjsmongodbaxios

解决方案

您必须需要您的服务器，因为您不需要使用 axios，因为您可以使用您的套接字连接管理所有内容。

Server.js 管理您想要使用数据库的后端。

Server.js：实现一个启动套接字。

const io = require('socket.io')();
const AVATAR = 'https://i1.wp.com/tricksmaze.com/wp-content/uploads/2017/10/Stylish-Girls-Profile-Pictures-11.jpg';
const NAME = '@zoya';

io.on('connection', function (client) {
    // console.log('client Id::', client.id)
    //chat message
    client.on('chat-message', function (messages) {
        let { message } = messages;
        let messageObj = {
            sender: NAME,
            avatar: AVATAR,
            message
        }
        client.emit('chat-message', messageObj);
    });

    //disconnects...
    client.on('disconnect', function () {
        console.log('disconnect client Id::', client.id)
    });
});

const port = 8000;
io.listen(port);
console.log('listening on port : ', port);

在客户端。

'use static';

import React, { Component } from 'react';
import openSocket from 'socket.io-client';
const SERVER = `http://localhost:8000/`;
const NAME = '@asif';
const AVATAR = 'https://pbs.twimg.com/profile_images/874276197357596672/kUuht00m_400x400.jpg';
const AVATAR1 = 'https://i1.wp.com/tricksmaze.com/wp-content/uploads/2017/10/Stylish-Girls-Profile-Pictures-11.jpg';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      typing: '',
      messages: []
    }
    this.socket = openSocket(SERVER);
    this.chatMessage = this.chatMessage.bind(this);
  }

  componentDidMount() {
    this.chatMessage();
  }

  chatMessage() {
    this.socket.on('chat-message', (messageObj) => {
      let { messages } = this.state;
      messages.push(messageObj);
      this.setState({ messages: messages })
    })
  }

  sendMessage = () => {
    let { messages, typing } = this.state;
    if (typing && typing !== '') {
      const message = typing;
      this.setState({ typing: '' })
      let messageObj = {
        sender: NAME,
        avatar: AVATAR,
        message
      }
      messages.push(messageObj);
      this.setState({ messages: messages })
      this.socket.emit('chat-message', messageObj);
    } else {
      alert(`Message can't empty`);
    }
  };

  renderItem() {
    return  this.state.messages.map((item,key)=>{
      return (
      <div >
        <image  src={ item.avatar } />
        <div }>
          <span >{item.sender}</span>
          <span >{item.message}</span>
        </div>
      </div>
    );
   })        
  }

  render() {

    return (
      <div >
        <div >
          <h1 >
            Chat App
          </h1>
        </div>
        {this.renderItem()}
          <div >
          <input 
             Type="text"  
             ref={ref => { this._messageInput = ref }}
             placeholder="Type Message..." 
             value={this.state.typing} 
             onChangeText={text => this.setState({ typing: text })}
           />
            <button onClick={() => this.sendMessage()}>
              <span >Send</span>
            </button>
          </div>
      </div>
    );
  }
}
export default App;

希望这对你有帮助。

推荐阅读