我目前正在使用Wordpress作为后端来建立一个React前端网站。我已经成功地使用 JWT 设置了user authentication，现在我正尝试将发帖请求发送给Contact Form 7，而将表单标签转换为json时遇到了麻烦而且我真的不知道从哪里开始，我也不完全确定这是正确的过程。
我正在使用axios发送帖子请求，并且网站仍在本地运行（我知道我可能遇到 CORS 问题，实际上无法将表格发送到电子邮件，但是我想要使其到达正确传输所有数据的位置。
下面是我的联系人组件的代码。
当前错误： Console Errors
反应天才请帮助：）....
import React,{Component} from 'react'
import axios from 'axios'
class Contact extends Component {
constructor(props) {
super(props)
this.state = {
yourName: '',yourEmail: '',subject: '',message: '',successMessage:'',loading: false,error: ''
}
}
onFormSubmit = (event) => {
event.preventDefault()
const siteURL = 'http://localhost/wordpress'
const formData = {
yourName: this.state.yourName,yourEmail: this.state.yourEmail,subject: this.state.subject,message: this.state.message
}
this.setState({ loading:true},() => {
axios.post(`${siteURL}/wp-json/contact-form-7/v1/contact-forms/92/feedback`,formData)
.then( res => {
this.setState({loading: false,successMessage: 'Yay your message was sent'})
console.warn( res.data)
})
.catch( err => {
this.setState({ error: err.response.data,loading: false})
})
})
}
handleonChange = (event) => {
event.preventDefault()
this.setState({ [event.target.name]: event.target.value})
}
render() {
const { yourName,yourEmail,subject,message,successMessage} = this.state
return(
<React.Fragment>
<form onSubmit={this.onFormSubmit} style={{ margin: '20px'}}>
<label classname='form-group'>
Name:
<input
type='text'
classname="form-control"
name='yourName'
value={yourName}
onChange={this.handleonChange}
></input>
</label>
<br />
<label classname='form-group'>
Email:
<input
type='text'
classname="form-control"
name='yourEmail'
value={yourEmail}
onChange={this.handleonChange}
></input>
</label>
<br />
<label classname='form-group'>
Subject:
<input
type='text'
classname="form-control"
name='subject'
value={subject}
onChange={this.handleonChange}
></input>
</label>
<br />
<div classname="form-group">
<label classname="form-group"> Message:</label>
<textarea
type='textarea'
classname="form-control"
name='message'
value={message}
onChange={this.handleonChange}
rows="3"
></textarea>
</div>
<br />
<button type='submit' classname='btn btn-primary'>Login</button>
<h1>{successMessage}</h1>
</form>
</React.Fragment>
)
}
}
export default Contact
联系表格7布局：
<label> Your Name (required)
[text* your-name] </label>
<label> Your Email (required)
[email* your-email] </label>
<label> Subject
[text your-subject] </label>
<label> Your Message
[textarea your-message] </label>
[submit "Send"]
好吧，我对此已经取得了一些进展，下面的注释是正确的，并且格式必须采用“您的名字”：格式。
您还必须经过身份验证才能将发帖请求发送到联系表单，我发现这有点奇怪，因为表单不应该被所有人使用吗？
我现在收到发帖请求以验证这是我的代码
import React,{Component} from 'react'
import axios from 'axios'
class Contact extends Component {
constructor(props) {
super(props)
this.state = {
yourName: '',error: ''
}
}
onFormSubmit = (event) => {
event.preventDefault()
const siteURL = 'https://cors-anywhere.herokuapp.com/https://thedigiweb.uk'
const formData = {
'your-name':
this.state.yourName,'your-email':
this.state.yourEmail,'your-subject':
this.state.subject,'your-message' :
this.state.message,}
console.log(formData)
const token = localStorage.getItem('token')
this.setState({ loading: true},() => {
axios.post(`${siteURL}/wp-json/contact-form-7/v1/contact-forms/55/feedback`,{formData},{
headers: {
Authorization: `Bearer ${token}`
}
})
.then( res => {
this.setState({loading: false,successMessage: res.data.message})
console.warn( res.data)
})
.catch( err => {
this.setState({ error: 'you have an error',loading: false})
})
})
}
handleonChange = (event) => {
event.preventDefault()
this.setState({ [event.target.name]: event.target.value})
}
render() {
const { yourName,successMessage} = this.state
return(
<React.Fragment>
<form onSubmit={this.onFormSubmit} style={{ margin: '20px'}}>
<label classname='form-group'>
Name:
<input
type='text'
classname="form-control"
name='yourName'
value={yourName}
onChange={this.handleonChange}
></input>
</label>
<br />
<label classname='form-group'>
Email:
<input
type='text'
classname="form-control"
name='yourEmail'
value={yourEmail}
onChange={this.handleonChange}
></input>
</label>
<br />
<label classname='form-group'>
Subject:
<input
type='text'
classname="form-control"
name='subject'
value={subject}
onChange={this.handleonChange}
></input>
</label>
<br />
<div classname="form-group">
<label classname="form-group"> Message:</label>
<textarea
type='textarea'
classname="form-control"
name='message'
value={message}
onChange={this.handleonChange}
rows="3"
></textarea>
</div>
<br />
<button type='submit' classname='btn btn-primary'>Submit</button>
<h1>{successMessage}</h1>
</form>
</React.Fragment>
)
}
}
export default Contact
现在唯一的事情是电子邮件没有被发送，通过PostMan可以正常工作，我也不需要任何令牌来发送表单。
如果有人希望加入该论坛，我们将不胜感激，我敢肯定，所有这些问题都很容易解决。