Pusher周围的重构类组件

Question

我通常对此很好。也许我的大脑有点炸了，我需要离开屏幕一段时间。.

为了我的理智，有人可以帮助我将以下内容重构为功能组件。.>

我正在努力地移动代码以与componenetwillmount一起使用，并且理想情况下是希望将axios替换为具有useeffect的fetch（因此与我的其余代码类似）

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;
我应该添加，以下是我尝试过的...我设法成功完成了这些工作，但是一旦我单击表单元素，我就会得到“无法读取map.e的undefined属性（行84）-在以下注释的帮助下进行了更新：）

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;

我通常对此很好。也许我的大脑有点炸了，我需要离开屏幕片刻。.出于我的理智，有人可以帮助我将以下内容重构为功能组件吗？。我是...

Answer 1

您的axios.post(...).then(...)呼叫没有setState的comments。 useState的设置器不会合并对象，因为它发生在类组件中，但会完全替换值。