Javascript 反应Axios输入未定义
我必须使用Axios将{input}数据发布到。但是{input}变为未定义 我使用const而不是类主扩展组件。一旦更改,它将设置表单数据Javascript 反应Axios输入未定义,javascript,node.js,reactjs,axios,Javascript,Node.js,Reactjs,Axios,我必须使用Axios将{input}数据发布到。但是{input}变为未定义 我使用const而不是类主扩展组件。一旦更改,它将设置表单数据 const Main = ({ value, suggestions, auth: { user } }) => { const [formData, setFormData] = useState(""); const [messages, setMessages] = useState([]); const { input }
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柱
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>
);
};
返回(
onSubmit(e)}>
onChange(e)}
/>
)}
发送
);
};
正如我在评论部分所提到的formData
是一个字符串,我看到它没有一个名为input
的属性,您试图对它进行解构,这就是为什么它总是未定义的原因
如果您确实需要该格式用于axios,则可以尝试使用useState
更改formData
的结构,如下所示:
const [formData, setFormData] = useState({input: null});
然后,您可以尝试更新为:
const onChange = e => setFormData({input: e.target.value});
我希望这有帮助 正如我在评论部分所提到的formData
是一个字符串,在我看来,它没有一个名为input
的属性,这就是为什么它总是未定义的原因
如果您确实需要该格式用于axios,则可以尝试使用useState
更改formData
的结构,如下所示:
const [formData, setFormData] = useState({input: null});
然后,您可以尝试更新为:
const onChange = e => setFormData({input: e.target.value});
我希望这有帮助 formData
是我看到的一个字符串,它没有一个名为input
的属性,而您尝试对其进行解构。formData
是我看到的一个字符串,它没有一个名为input
的属性,而您尝试对其进行解构。谢谢,还有一件事。我们真的不能输入“表单数据”吗?如何将{input}设置为表单数据<代码>常量数据=新FormData();data.set(“input”,{input})代码>效果不好。谢谢,还有一件事。我们真的不能输入“表单数据”吗?如何将{input}设置为表单数据<代码>常量数据=新FormData();data.set(“input”,{input})代码>没有很好地工作。