React - 输入状态以列出状态

Question

I am trying to do chat app. My goal is, when user submits an input, add it to {messages} state then map the messages. messages is a blank list. I must get user's input then add it to messages. But I don't understand how it works.

Imports

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

Chat

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

  const { input } = formData;

Return

  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 and export

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

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

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

Answer 1

You don't use this in a functional component. Correct code should look like 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]);