React - состояние ввода в состояние списка

Question

Я пытаюсь сделать приложение чата. Моя цель состоит в том, чтобы, когда пользователь отправлял вход, добавлял его в состояние {messages} и затем отображал сообщения. сообщения это пустой список. Я должен получить ввод пользователя, а затем добавить его в сообщения. Но я не понимаю, как это работает.

Импорт

import React, { useEffect, Component, useState, setState } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";

Чат

const Chat = ({ value, suggestions, auth: { user } }) => {
  const [formData, setFormData] = useState({
    input: ""
  });

  const { input } = formData;

Возврат

  return (
    <div>
      <div>
        <a>
          {messages.map((item, i) => (
            <li key={i}>Test</li>
          ))}
        </a>
        <br />
        <div>
          <div className="App"></div>
        </div>
      </div>
      <br />
      <form noValidate onSubmit={e => onSubmit(e)}>
        <div>
          <input />
          <div>
            <button>
              <a>Send</a>
            </button>
          </div>
        </div>
      </form>
    </div>
  );
};

PropTypes, mapStateToProps и экспорт

Chat.propTypes = {
  getCurrentName: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  auth: state.auth
});

export default connect(mapStateToProps, { getCurrentName })(Chat);

Answer 1

Вы не используете this в функциональном компоненте. Правильный код должен выглядеть так:

const Chat = ({ value, suggestions, auth: { user } }) => {
  const [formData, setFormData] = useState("");

  const [messages, setMessages] = useState([]);

  const onChange = e =>
    setFormData(e.target.value);

  const onSubmit = event => {
    event.preventDefault();
    setMessages(prevMsgs => [...prevMsgs, formData]);