React- Unhandled Rejection (TypeError): 无法读取未定义的 属性 'data'
React- Unhandled Rejection (TypeError): Cannot read property 'data' of undefined
我正在注册以创建个人资料。输入值后,当我单击提交时出现此错误
profile.js
import axios from "axios";
import { setAlert } from "./alert";
import { GET_PROFILE, PROFILE_ERROR } from "./types";
export const getCurrentProfile = () => async (dispatch) => {
try {
const res = await axios.get("/api/profile/me");
dispatch({
type: GET_PROFILE,
payload: res.data,
});
} catch (error) {
dispatch({
type: PROFILE_ERROR,
payload: {
msg: error.response.statusText,
status: error.response.status,
},
});
}
};
//Create or Update profile
export const createProfile =
(formData, history, edit = false) =>
async (dispatch) => {
try {
const config = {
headers: {
"Content=Type": "application/json",
},
};
const res = await axios.post("/api/profile", formData, config);
dispatch({
type: GET_PROFILE,
payload: res.data,
});
dispatch(setAlert(edit ? "Profile Updated" : "Profile Created"));
if (!edit) {
history.push("/dashboard");
}
} catch (error) {
const errors = error.response.data.errors;
if (errors) {
errors.forEach((error) => dispatch(setAlert(error.msg, "danger")));
}
dispatch({
type: PROFILE_ERROR,
payload: {
msg: error.response.statusText,
status: error.response.status,
},
});
}
};
CreateProfile.js
import React, { Fragment, useState } from "react";
import { Link, withRouter } from "react-router-dom";
import { createProfile } from "../../actions/profile";
import { connect } from "react-redux";
import PropTypes from "prop-types";
const CreateProfile = ({ createProfile, history }) => {
const [formData, setFormData] = useState({
status: "",
company: "",
bio: "",
website: "",
location: "",
skills: "",
github_username: "",
twitter: "",
facebook: "",
linkedin: "",
});
const [displaySocialInputs, toggleSocialInputs] = useState(false);
const {
status,
company,
bio,
website,
location,
skills,
github_username,
twitter,
facebook,
linkedin,
} = formData;
const onChange = (e) =>
setFormData({ ...formData, [e.target.name]: e.target.value });
const onSubmit = (e) => {
e.preventDefault();
createProfile(formData, history);
};
return (
<Fragment>
<h1 className='large text-primary'>Create Your Profile</h1>
<p className='lead'>
<i className='fas fa-user'></i> Let's get some information to make your
profile stand out
</p>
<small>* = required field</small>
<form className='form' onSubmit={(e) => onSubmit(e)}>
<div className='form-group'>
<select name='status' value={status} onChange={(e) => onChange(e)}>
<option value='0'>* Select Professional Status</option>
<option value='Developer'>Developer</option>
<option value='Junior Developer'>Junior Developer</option>
<option value='Senior Developer'>Senior Developer</option>
<option value='Manager'>Manager</option>
<option value='Student or Learning'>Student or Learning</option>
<option value='Instructor'>Instructor or Teacher</option>
<option value='Intern'>Intern</option>
<option value='Other'>Other</option>
</select>
<small className='form-text'>
Give us an idea of where you are at in your career
</small>
</div>
<div className='form-group'>
<input
type='text'
placeholder='Company'
name='company'
value={company}
onChange={(e) => onChange(e)}
/>
<small className='form-text'>
Could be your own company or one you work for
</small>
</div>
<div className='form-group'>
<input
type='text'
placeholder='Website'
name='website'
value={website}
onChange={(e) => onChange(e)}
/>
<small className='form-text'>
Could be your own or a company website
</small>
</div>
<div className='form-group'>
<input
type='text'
placeholder='Location'
name='location'
value={location}
onChange={(e) => onChange(e)}
/>
<small className='form-text'>
City & state suggested (eg. Boston, MA)
</small>
</div>
<div className='form-group'>
<input
type='text'
placeholder='* Skills'
name='skills'
value={skills}
onChange={(e) => onChange(e)}
/>
<small className='form-text'>
Please use comma separated values (eg. HTML,CSS,JavaScript,PHP)
</small>
</div>
<div className='form-group'>
<input
type='text'
placeholder='Github Username'
name='githubusername'
value={github_username}
onChange={(e) => onChange(e)}
/>
<small className='form-text'>
If you want your latest repos and a Github link, include your
username
</small>
</div>
<div className='form-group'>
<textarea
placeholder='A short bio of yourself'
name='bio'
value={bio}
onChange={(e) => onChange(e)}
></textarea>
<small className='form-text'>Tell us a little about yourself</small>
</div>
<div className='my-2'>
<button
onClick={() => toggleSocialInputs(!displaySocialInputs)}
type='button'
className='btn btn-light'
>
Add Social Network Links
</button>
<span>Optional</span>
</div>
{displaySocialInputs && (
<Fragment>
<div className='form-group social-input'>
<i className='fab fa-twitter fa-2x'></i>
<input
type='text'
placeholder='Twitter URL'
name='twitter'
value={twitter}
onChange={(e) => onChange(e)}
/>
</div>
<div className='form-group social-input'>
<i className='fab fa-facebook fa-2x'></i>
<input
type='text'
placeholder='Facebook URL'
name='facebook'
value={facebook}
onChange={(e) => onChange(e)}
/>
</div>
<div className='form-group social-input'>
<i className='fab fa-linkedin fa-2x'></i>
<input
type='text'
placeholder='Linkedin URL'
name='linkedin'
value={linkedin}
onChange={(e) => onChange(e)}
/>
</div>
</Fragment>
)}
<input type='submit' className='btn btn-primary my-1' />
<a className='btn btn-light my-1' href='dashboard.html'>
Go Back
</a>
</form>
</Fragment>
);
};
CreateProfile.propTypes = {
createProfile: PropTypes.func.isRequired,
};
export default connect(null, { createProfile })(withRouter(CreateProfile));
在此之前一切正常 fine.I 能够登录,检查用户是否有配置文件,但出现此错误:未处理的拒绝(TypeError):无法读取 属性 'data' of undefined 我检查了很多来源,但我找不到问题所在。
我的项目沙盒link
我已经解决了问题
所以我遇到的第一个问题是创建个人资料时无法输入 Github 用户名。
这是因为在我的 CreateProfile.js 状态中有 github_username,但输入名称是 name="githubusername" 我正在使用名称作为状态中的键来更新状态,所以该值永远不会改变。
所以更改名称以匹配
name="github_username"
之后我可以输入一个Github用户名,我尝试提交表单,但仍然没有完全解决问题。
错误实际上来自我在 actions/profile.js createProfile 函数中的配置对象,因为我有..
"Content=Type": "application/json",
应该是
Content-Type not Content=Type
我正在注册以创建个人资料。输入值后,当我单击提交时出现此错误
profile.js
import axios from "axios";
import { setAlert } from "./alert";
import { GET_PROFILE, PROFILE_ERROR } from "./types";
export const getCurrentProfile = () => async (dispatch) => {
try {
const res = await axios.get("/api/profile/me");
dispatch({
type: GET_PROFILE,
payload: res.data,
});
} catch (error) {
dispatch({
type: PROFILE_ERROR,
payload: {
msg: error.response.statusText,
status: error.response.status,
},
});
}
};
//Create or Update profile
export const createProfile =
(formData, history, edit = false) =>
async (dispatch) => {
try {
const config = {
headers: {
"Content=Type": "application/json",
},
};
const res = await axios.post("/api/profile", formData, config);
dispatch({
type: GET_PROFILE,
payload: res.data,
});
dispatch(setAlert(edit ? "Profile Updated" : "Profile Created"));
if (!edit) {
history.push("/dashboard");
}
} catch (error) {
const errors = error.response.data.errors;
if (errors) {
errors.forEach((error) => dispatch(setAlert(error.msg, "danger")));
}
dispatch({
type: PROFILE_ERROR,
payload: {
msg: error.response.statusText,
status: error.response.status,
},
});
}
};
CreateProfile.js
import React, { Fragment, useState } from "react";
import { Link, withRouter } from "react-router-dom";
import { createProfile } from "../../actions/profile";
import { connect } from "react-redux";
import PropTypes from "prop-types";
const CreateProfile = ({ createProfile, history }) => {
const [formData, setFormData] = useState({
status: "",
company: "",
bio: "",
website: "",
location: "",
skills: "",
github_username: "",
twitter: "",
facebook: "",
linkedin: "",
});
const [displaySocialInputs, toggleSocialInputs] = useState(false);
const {
status,
company,
bio,
website,
location,
skills,
github_username,
twitter,
facebook,
linkedin,
} = formData;
const onChange = (e) =>
setFormData({ ...formData, [e.target.name]: e.target.value });
const onSubmit = (e) => {
e.preventDefault();
createProfile(formData, history);
};
return (
<Fragment>
<h1 className='large text-primary'>Create Your Profile</h1>
<p className='lead'>
<i className='fas fa-user'></i> Let's get some information to make your
profile stand out
</p>
<small>* = required field</small>
<form className='form' onSubmit={(e) => onSubmit(e)}>
<div className='form-group'>
<select name='status' value={status} onChange={(e) => onChange(e)}>
<option value='0'>* Select Professional Status</option>
<option value='Developer'>Developer</option>
<option value='Junior Developer'>Junior Developer</option>
<option value='Senior Developer'>Senior Developer</option>
<option value='Manager'>Manager</option>
<option value='Student or Learning'>Student or Learning</option>
<option value='Instructor'>Instructor or Teacher</option>
<option value='Intern'>Intern</option>
<option value='Other'>Other</option>
</select>
<small className='form-text'>
Give us an idea of where you are at in your career
</small>
</div>
<div className='form-group'>
<input
type='text'
placeholder='Company'
name='company'
value={company}
onChange={(e) => onChange(e)}
/>
<small className='form-text'>
Could be your own company or one you work for
</small>
</div>
<div className='form-group'>
<input
type='text'
placeholder='Website'
name='website'
value={website}
onChange={(e) => onChange(e)}
/>
<small className='form-text'>
Could be your own or a company website
</small>
</div>
<div className='form-group'>
<input
type='text'
placeholder='Location'
name='location'
value={location}
onChange={(e) => onChange(e)}
/>
<small className='form-text'>
City & state suggested (eg. Boston, MA)
</small>
</div>
<div className='form-group'>
<input
type='text'
placeholder='* Skills'
name='skills'
value={skills}
onChange={(e) => onChange(e)}
/>
<small className='form-text'>
Please use comma separated values (eg. HTML,CSS,JavaScript,PHP)
</small>
</div>
<div className='form-group'>
<input
type='text'
placeholder='Github Username'
name='githubusername'
value={github_username}
onChange={(e) => onChange(e)}
/>
<small className='form-text'>
If you want your latest repos and a Github link, include your
username
</small>
</div>
<div className='form-group'>
<textarea
placeholder='A short bio of yourself'
name='bio'
value={bio}
onChange={(e) => onChange(e)}
></textarea>
<small className='form-text'>Tell us a little about yourself</small>
</div>
<div className='my-2'>
<button
onClick={() => toggleSocialInputs(!displaySocialInputs)}
type='button'
className='btn btn-light'
>
Add Social Network Links
</button>
<span>Optional</span>
</div>
{displaySocialInputs && (
<Fragment>
<div className='form-group social-input'>
<i className='fab fa-twitter fa-2x'></i>
<input
type='text'
placeholder='Twitter URL'
name='twitter'
value={twitter}
onChange={(e) => onChange(e)}
/>
</div>
<div className='form-group social-input'>
<i className='fab fa-facebook fa-2x'></i>
<input
type='text'
placeholder='Facebook URL'
name='facebook'
value={facebook}
onChange={(e) => onChange(e)}
/>
</div>
<div className='form-group social-input'>
<i className='fab fa-linkedin fa-2x'></i>
<input
type='text'
placeholder='Linkedin URL'
name='linkedin'
value={linkedin}
onChange={(e) => onChange(e)}
/>
</div>
</Fragment>
)}
<input type='submit' className='btn btn-primary my-1' />
<a className='btn btn-light my-1' href='dashboard.html'>
Go Back
</a>
</form>
</Fragment>
);
};
CreateProfile.propTypes = {
createProfile: PropTypes.func.isRequired,
};
export default connect(null, { createProfile })(withRouter(CreateProfile));
在此之前一切正常 fine.I 能够登录,检查用户是否有配置文件,但出现此错误:未处理的拒绝(TypeError):无法读取 属性 'data' of undefined 我检查了很多来源,但我找不到问题所在。
我的项目沙盒link
我已经解决了问题
所以我遇到的第一个问题是创建个人资料时无法输入 Github 用户名。
这是因为在我的 CreateProfile.js 状态中有 github_username,但输入名称是 name="githubusername" 我正在使用名称作为状态中的键来更新状态,所以该值永远不会改变。
所以更改名称以匹配
name="github_username"
之后我可以输入一个Github用户名,我尝试提交表单,但仍然没有完全解决问题。
错误实际上来自我在 actions/profile.js createProfile 函数中的配置对象,因为我有..
"Content=Type": "application/json",
应该是
Content-Type not Content=Type