Reactjs 围绕Pusher重构类组件_Reactjs_Pusher

Reactjs 围绕Pusher重构类组件

reactjs

Reactjs 围绕Pusher重构类组件,reactjs,pusher,Reactjs,Pusher,我通常在这方面还可以。也许我的大脑有点崩溃了，我需要离开屏幕一会儿为了我的理智，有人能帮我把下面的内容重构成一个功能组件吗我正在努力处理componenetwillmount的代码，理想情况下，我希望用fetch with useffect替换axios（因此它与我的其余代码类似） import React，{Component}来自'React'；从“Pusher js”导入Pusher；从“axios”导入axios；从“@material ui/core/Grid”导入网格；从

我通常在这方面还可以。也许我的大脑有点崩溃了，我需要离开屏幕一会儿

为了我的理智，有人能帮我把下面的内容重构成一个功能组件吗

我正在努力处理componenetwillmount的代码，理想情况下，我希望用fetch with useffect替换axios（因此它与我的其余代码类似）

import React，{Component}来自'React'；
从“Pusher js”导入Pusher；
从“axios”导入axios；
从“@material ui/core/Grid”导入网格；
从“../components/Grid/CustomGridItem”导入CustomGridItem
从“@material ui/core/CardHeader”导入CardHeader；
从“@material ui/core/CardContent”导入CardContent；
从“力矩”中导入力矩；
类应用程序扩展组件{
状态={
用户名：“”，
日期：''，
颜色：“ffff80”，
新成员：''，
评论：[]，
};
updateInput=事件=>{
常量{name，value}=event.target；
这是我的国家({
[名称]：值，
});
};
后通知=事件=>{
event.preventDefault（）；
const{username，newComment，color}=this.state；
if（username.trim（）==“”| | newComment.trim（）==“”）返回；
常数数据={
名称：用户名，
文本：新成员，
颜色：颜色，
日期：矩（）.format（'MMMM Do YYYY h:mm:ss a'），
};
axios
.post（'http://localhost:1234/comment",数据)
.然后（（）=>{
这是我的国家({
用户名：“”，
新成员：''，
颜色：''，
日期：矩（）.格式（'MMMM Do YYYY h:mm:ss a'）
});
})
.catch（错误=>console.log（错误））；
};
componentDidMount（）{
常量推送器=新推送器（'XXXXXXXXX'{
组别:"欧盟",，
加密：对，
});
axios.get（）http://localhost:1234）。然后（{data}）=>{
这是我的国家({
评论：[……数据]，
});
}).catch（错误=>console.log（错误））
const channel=pusher.subscribe（'comments'）；
channel.bind（'new-comment'，data=>{
this.setState（prevState=>{
const{comments}=prevState；
comments.push（data.comment）；
返回{
评论，
};
});
});
}
render（）{
const{username，newComment，date，color，comments}=this.state；
const{classes}=this.props；
const userComments=comments.map（e=>(
{e.text}
));
返回(
{userComments}



名称：



评论：



注意颜色：




添加注释！
);
}
}
导出默认应用程序；

我应该补充一点，下面是我尝试过的…我现在已经成功地将帖子拉过了ok，但是当我点击表单元素时，我得到了一个“无法读取未定义的map.e属性（第84行）-在下面评论的帮助后更新：）

import React，{useState，useffect}来自“React”；
从“Pusher js”导入Pusher；
从“axios”导入axios；
从“@material ui/core/Grid”导入网格；
从“../components/Grid/CustomGridItem”导入CustomGridItem
从“@material ui/core/CardHeader”导入CardHeader；
从“@material ui/core/CardContent”导入CardContent；
从“力矩”中导入力矩；
常量应用=（道具）=>{
常量[formData，setFormData]=useState({
用户名：“”，
日期：''，
颜色：'#ffff80'，
新成员：'}）
const[comments，setComments]=useState（[]）
const updateInput=事件=>{
常量{name，value}=event.target；
setFormData({
[名称]：值，
});
console.log（用户名）
console.log（newComment）
};
const postComment=事件=>{
event.preventDefault（）；
const{username，newComment，color}=formData；
if（username.trim（）==“”| | newComment.trim（）==“”）返回；
常数数据={
名称：用户名，
文本：新成员，
颜色：颜色，
日期：矩（）.format（'MMMM Do YYYY h:mm:ss a'），
};
axios
.post（'http://localhost:1234/comment",数据)
.然后（（）=>{
setFormData({
用户名：“”，
新成员：''，
颜色：''，
日期：矩（）.格式（'MMMM Do YYYY h:mm:ss a'）
});
})
.catch（错误=>console.log（错误））；
};
useffect（（）=>{
const fetchData=async（）=>{
常量推送器=新推送器（'XXXXXXXXX'{
组别:"欧盟",，
加密：对，
});
axios.get（）http://localhost:1234）。然后（{data}）=>{
setComments（[…数据]）；
}).catch（错误=>console.log（错误））
const channel=pusher.subscribe（'comments'）；
channel.bind（'new-comment'，data=>{
setComments（prevState=>{
const{comments}=prevState；
comments.push（data.comment）；
返回{
评论，
};
});
});
}
fetchData（）；
}, []);
const{username，newComment，date，color}=formData；
常量{classes}=props；
const userComments=comments.map（e=>(
{e.text}
));
返回(
{userComments}

import React, { Component } from 'react';
import Pusher from 'pusher-js';
import axios from 'axios';
import Grid from '@material-ui/core/Grid';
import CustomGridItem from '../components/Grid/CustomGridItem'
import CardHeader from '@material-ui/core/CardHeader';
import CardContent from '@material-ui/core/CardContent';
import moment from 'moment';

    class App extends Component {
      state = {
        username: '',
        date: '',
        color: "#ffff80",
        newComment: '',
        comments: [],
      };

      updateInput = event => {
        const { name, value } = event.target;
        this.setState({
          [name]: value,
        });
      };

      postComment = event => {
        event.preventDefault();
        const { username, newComment, color } = this.state;
        if (username.trim() === '' || newComment.trim() === '') return;

        const data = {
          name: username,
          text: newComment,
          color: color,
          date: moment().format('MMMM Do YYYY h:mm:ss a'),
        };

        axios
          .post('http://localhost:1234/comment', data)
          .then(() => {
            this.setState({
              username: '',
              newComment: '',
              color: '',
              date: moment().format('MMMM Do YYYY h:mm:ss a')
            });
          })
          .catch(error => console.log(error));
      };

      componentDidMount() {
        const pusher = new Pusher('xxxxxxxxxx', {
          cluster: 'eu',
          encrypted: true,
        });

        axios.get('http://localhost:1234').then(({ data }) => {
          this.setState({
            comments: [...data],
          });
        }).catch(error => console.log(error))

        const channel = pusher.subscribe('comments');
        channel.bind('new-comment', data => {
          this.setState(prevState => {
            const { comments } = prevState;
            comments.push(data.comment);

            return {
              comments,
            };
          });
        });
      }

      render() {
        const { username, newComment, date, color, comments } = this.state;
        const { classes } = this.props;
        const userComments = comments.map(e => (
          <CustomGridItem color={e.color} xs={12} md={12} lg={12} xl={12} key={e._id}>
            <CardHeader title={e.name} subheader={e.date} />
            <CardContent>{e.text}</CardContent>
          </CustomGridItem>
        ));

        return (
          <div className="App">
            <Grid container direction="row" justify="flex-start" alignItems="stretch" spacing={3} >
            {userComments}
            </Grid>
            <br /> <br />
            <section className="comments-form">
              <form onSubmit={this.postComment}>
                <label htmlFor="username">Name:</label><br />
                <input
                  className="username"
                  name="username"
                  id="username"
                  type="name"
                  value={username}
                  onChange={this.updateInput}
                />
                <input
                  className="date"
                  name="date"
                  id="date"
                  type="hidden"
                  value={date}
                />
                <br />
                <label htmlFor="new-comment">Comment:</label><br />
                <textarea
                  name="newComment"
                  id="new-comment"
                  value={newComment}
                  onChange={this.updateInput}
                /><br />
                <label htmlFor="new-comment">Note colour:</label><br />
                <input
                  type="color"
                  name="color"
                  id="color"
                  value={color}
                  onChange={this.updateInput}></input><br /><br />
                <button type="submit">Add Note!</button>
              </form>
            </section>
          </div>
        );
      }
    }

    export default App;


import React, { useState, useEffect } from 'react';
import Pusher from 'pusher-js';
import axios from 'axios';
import Grid from '@material-ui/core/Grid';
import CustomGridItem from '../components/Grid/CustomGridItem'
import CardHeader from '@material-ui/core/CardHeader';
import CardContent from '@material-ui/core/CardContent';
import moment from 'moment';

const App = (props) => {
  const [formData, setFormData] = useState({
                                    username: '',
                                    date: '',
                                    color: '#ffff80',
                                    newComment: ''})

  const [comments, setComments] = useState([])

  const updateInput = event => {
        const { name, value } = event.target;
        setFormData({
          [name]: value,
        });
        console.log(username)
        console.log(newComment)
      };

  const postComment = event => {
        event.preventDefault();
        const { username, newComment, color } = formData;
        if (username.trim() === '' || newComment.trim() === '') return;

        const data = {
          name: username,
          text: newComment,
          color: color,
          date: moment().format('MMMM Do YYYY h:mm:ss a'),
        };

        axios
          .post('http://localhost:1234/comment', data)
          .then(() => {
            setFormData({
              username: '',
              newComment: '',
              color: '',
              date: moment().format('MMMM Do YYYY h:mm:ss a')
            });
          })
          .catch(error => console.log(error));
      };

      useEffect(() => {

        const fetchData = async () => {

        const pusher = new Pusher('xxxxxxxxxx', {
          cluster: 'eu',
          encrypted: true,
        });

        axios.get('http://localhost:1234').then(({ data }) => {
          setComments([...data]);
        }).catch(error => console.log(error))

        const channel = pusher.subscribe('comments');
        channel.bind('new-comment', data => {
          setComments(prevState => {
            const { comments } = prevState;
            comments.push(data.comment);

            return {
              comments,
            };
          });
        });

      }

      fetchData();

    }, []);



        const { username, newComment, date, color } = formData;
        const { classes } = props;
        const userComments = comments.map(e => (
          <CustomGridItem color={e.color} xs={10} md={10} lg={10} xl={10} key={e._id}>
            <CardHeader title={e.name} subheader={e.date} />
            <CardContent>{e.text}</CardContent>
          </CustomGridItem>
        ));

        return (
          <div className="App">
            <Grid container direction="row" justify="center" alignItems="stretch" spacing={3} >
            {userComments}
            </Grid>
            <br /> <br />
            <section className="comments-form">
              <form onSubmit={postComment}>
                <label htmlFor="username">Name:</label><br />
                <input
                  className="username"
                  name="username"
                  id="username"
                  type="name"
                  value={username}
                  onChange={updateInput}
                />
                <input
                  className="date"
                  name="date"
                  id="date"
                  type="hidden"
                  value={date}
                />
                <br />
                <label htmlFor="new-comment">Comment:</label><br />
                <textarea
                  name="newComment"
                  id="new-comment"
                  value={newComment}
                  onChange={updateInput}
                /><br />
                <label htmlFor="new-comment">Note colour:</label><br />
                <input
                  type="color"
                  name="color"
                  id="color"
                  value={color}
                  onChange={updateInput}></input><br /><br />
                <button type="submit">Add Note!</button>
              </form>
            </section>
          </div>
        );

    }

    export default App;

.then(() => {
  setState({
    username: "",
    newComment: "",
    color: "",
    date: moment().format("MMMM Do YYYY h:mm:ss a")
});

const [formData, setFormData] = useState({
  username: '',
  date: '',
  color: "#ffff80",
  newComment: ''
});
const [allComments, setAllComments] = useState([]);