反应Axios输入未定义

Question

我必须发布{输入}数据以http://localhost:4000/predictionAxios。但是{输入}变为未定义。

我使用const而不是类Main扩展组件. onChange，它设置表单数据。

const Main = ({ value, suggestions, auth: { user } }) => {

  const [formData, setFormData] = useState("");

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

  const { input } = formData;

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

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

    console.log({ input });

阿希奥斯邮报。

    axios
      .post(
        `http://localhost:4000/prediction`,
        { input },
        { crossdomain: true }
      )
      .then(res => {
        console.log(res.data);
        //setMessages(prevMsgs => [...prevMsgs, formData]);
      })
      .catch(error => {
        console.log(error.message);
      });
  };

返回（表单）时带有onSubmit、onChange。

  return (
    <div className="true">
      <br />
      <form noValidate onSubmit={e => onSubmit(e)}>
        <div className="input-group mb-3">
           <input
                name="input"
                type="text"
                className="form-control"
                placeholder="Type text"
                onChange={e => onChange(e)}
              />
            )}
          <div className="input-group-append">
            <button className="btn btn-outline-secondary">Send</button>
          </div>
        </div>
      </form>
    </div>
  );
};

Answer 1

正如我在评论部分所提到的那样，formData是一个字符串，我看到它没有一个名为input的属性，您试图对其进行解构，这就是为什么它总是未定义的原因。

如果您确实需要axios的这种格式，那么您可以尝试使用useState更改formData的结构，如下所示：

const [formData, setFormData] = useState({input: null});

那么也许你可以尝试更新为：

const onChange = e => setFormData({input: e.target.value});

我希望这有帮助！