Javascript 每次我尝试更新web应用程序中的配置文件时,都会收到此消息
我尝试创建带有react、redux和node的web应用程序,我可以在其中创建和编辑配置文件数据,我有一个功能控制这两种情况,所以当我创建它时工作正常,但当我编辑它时会给我一条错误消息,我多次检查代码,但我看不到问题 这是错误消息Javascript 每次我尝试更新web应用程序中的配置文件时,都会收到此消息,javascript,node.js,reactjs,redux,es6-promise,Javascript,Node.js,Reactjs,Redux,Es6 Promise,我尝试创建带有react、redux和node的web应用程序,我可以在其中创建和编辑配置文件数据,我有一个功能控制这两种情况,所以当我创建它时工作正常,但当我编辑它时会给我一条错误消息,我多次检查代码,但我看不到问题 这是错误消息 Proxy error: Could not proxy request /api/profile from localhost:3000 to http://localhost:5000/. [1] See https://nodejs.org/api/err
Proxy error: Could not proxy request /api/profile from localhost:3000 to http://localhost:5000/.
[1] See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNRESET).
[1]
[1] Proxy error: Could not proxy request /api/profile from localhost:3000 to http://localhost:5000/.
[1] See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNRESET).
[1]
[0] server started in port 5000
[0] MongoDB connected
[1] Compiled with warnings.
[1]
[1] ./src/components/profile-form/EditProfile.js
[1] Line 48:6: React Hook useEffect has missing dependencies: 'getCurrentProfile', 'profile.bio', 'profile.company', 'profile.githubusername', 'profile.location', 'profile.skills', 'profile.social', 'profile.status', and 'profile.website'. Either include them or remove the dependency array. If 'getCurrentProfile' changes too often, find the parent component that defines it and wrap that definition in useCallback react-hooks/exhaustive-deps
这是我收到的第二条错误消息
(node:10664) UnhandledPromiseRejectionWarning: TypeError: skills.split is not a function
[0] at D:\Algorarhim and data structure\social app new version\router\api\profile.js:77:36
[0] at Layer.handle [as handle_request] (D:\Algorarhim and data structure\social app new version\node_modules\express\lib\router\layer.js:95:5)
[0] at next (D:\Algorarhim and data structure\social app new version\node_modules\express\lib\router\route.js:137:13)
[0] at middleware (D:\Algorarhim and data structure\social app new version\node_modules\express-validator\src\middlewares\check.js:15:13)
[0] at processTicksAndRejections (internal/process/task_queues.js:97:5)
[0] (node:10664) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
[0] (node:10664) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
这是控制编辑和创建的功能
import axios from 'axios';
import { setAlerts } from './alert';
import { GET_PROFILE, PROFILE_ERROR } from './types';
// 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(
setAlerts(edit ? 'Profile Updated' : 'Profile Created', 'success')
);
if (!edit) {
history.push('/dashboard');
}
} catch (err) {
const errors = err.response.data.error;
if (errors) {
errors.forEach(error => dispatch(setAlerts(error.msg, 'danger')));
}
dispatch({
type: PROFILE_ERROR,
payload: { msg: err.response.statusText, status: err.response.status }
});
}
};
这是我尝试在其中使用此函数的组件
import React, { useState, Fragment, useEffect } from 'react';
import { withRouter, Link } from 'react-router-dom';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { createProfile, getCurrentProfile } from '../../actions/profile';
const EditProfile = ({
profile: { profile, loading },
createProfile,
getCurrentProfile,
history
}) => {
const [formDate, setFormDate] = useState({
company: '',
website: '',
location: '',
status: '',
skills: '',
githubusername: '',
bio: '',
twitter: '',
facebook: '',
linkedin: '',
youtube: '',
instagram: ''
});
const [displaySocialInput, toggleSocialInput] = useState(false);
useEffect(() => {
getCurrentProfile();
setFormDate({
company: loading || !profile.company ? '' : profile.company,
website: loading || !profile.website ? '' : profile.website,
location: loading || !profile.location ? '' : profile.location,
status: loading || !profile.status ? '' : profile.status,
skills: loading || !profile.skills ? '' : profile.skills,
githubusername:
loading || !profile.githubusername ? '' : profile.githubusername,
bio: loading || !profile.bio ? '' : profile.bio,
twitter: loading || !profile.social ? '' : profile.social.twitter,
facebook: loading || !profile.social ? '' : profile.social.facebook,
linkedin: loading || !profile.social ? '' : profile.social.linkedin,
youtube: loading || !profile.social ? '' : profile.social.youtube,
instagram: loading || !profile.social ? '' : profile.social.instagram
});
// console.log(profile.company);
}, [loading]);
const {
company,
website,
location,
status,
skills,
githubusername,
bio,
twitter,
facebook,
linkedin,
youtube,
instagram
} = formDate;
const onChange = e =>
setFormDate({ ...formDate, [e.target.name]: e.target.value });
const onSubmit = e => {
e.preventDefault();
createProfile(formDate, history, true);
};
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={githubusername}
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)}
/>
<small className='form-text'>Tell us a little about yourself</small>
</div>
<div className='my-2'>
<button
onClick={() => toggleSocialInput(!displaySocialInput)}
type='button'
className='btn btn-light'
>
Add Social Network Links
</button>
<span>Optional</span>
</div>
{displaySocialInput && (
<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-youtube fa-2x'></i>
<input
type='text'
placeholder='YouTube URL'
name='youtube'
value={youtube}
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>
<div className='form-group social-input'>
<i className='fab fa-instagram fa-2x'></i>
<input
type='text'
placeholder='Instagram URL'
name='instagram'
value={instagram}
onChange={e => onChange(e)}
/>
</div>
</Fragment>
)}
<input type='submit' className='btn btn-primary my-1' />
<Link className='btn btn-light my-1' to='/dashboard'>
Go Back
</Link>
</form>
</Fragment>
);
};
EditProfile.propTypes = {
createProfile: PropTypes.func.isRequired,
getCurrentProfile: PropTypes.func.isRequired,
profile: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
profile: state.profile
});
export default connect(mapStateToProps, { createProfile, getCurrentProfile })(
withRouter(EditProfile)
);
从我所看到的技能只是字符串,所以不能在字符串变量上进行映射(可以在数组上进行映射)。 试试这个:
if (skills) {
profileField.skills = skills.split(',').trim();
}
如果这不起作用,请在此行之前插入:
console.log(skills)
检查你得到的数据并在这里显示。
如果第一个选项不起作用,您向我发送console.log结果,我将在明天(大约8-9小时)尝试回答这个问题。您必须将技能作为字符串插入,因为拆分函数可以将字符串拆分为拆分字符串的数组
a = "something, somethingelse, whatever" // that is correct
b = ["something", "somethingelse", "whatever"] // that gives error
c = []
const profileField = {};
console.log(profileField);
// Good result
profileField.skills = a.split(",").map(skills => skills.trim())
console.log(profileField.skills)
// result => [ 'something', 'somethingelse', 'whatever' ]
// TypeError result, comment to see good result
profileField.skills = b.split(",").map(skills => skills.trim())
console.log(profileField.skills)
// result => TypeError: b.split is not a function
// Bad result, Arrays cannot work with split function
// profileField.skills = c.split(",").map(skills => skills.trim())
// console.log(profileField.skills)
// to run node filename.js
我在我的模型技能中有这样的技能:{type:[String],required:true},这与创建配置文件相同,它工作良好,因此它如何在一个配置文件中工作,而在另一个配置文件中不工作,我制作了console.log,它为我提供了一系列技能。我知道它可以工作,但当我更新技能输入时,如删除或添加技能,但当我不更改它时,给我错误技能就像这样['redux','react','node']它以数组的形式出现,所以可能代码不起作用,因为它已经拆分,所以它给我错误,所以我想我需要一种方法来加入我的技能,再次成为一个字符串,以便正常工作,当我加入我的技能时,它从数据库返回,所以第一个技能以数组的形式返回,所以拆分给我错误,因为它已经拆分,所以我添加了join到我的代码,所以现在我的技能回来作为一个字符串,它的工作,谢谢Wiktor
a = "something, somethingelse, whatever" // that is correct
b = ["something", "somethingelse", "whatever"] // that gives error
c = []
const profileField = {};
console.log(profileField);
// Good result
profileField.skills = a.split(",").map(skills => skills.trim())
console.log(profileField.skills)
// result => [ 'something', 'somethingelse', 'whatever' ]
// TypeError result, comment to see good result
profileField.skills = b.split(",").map(skills => skills.trim())
console.log(profileField.skills)
// result => TypeError: b.split is not a function
// Bad result, Arrays cannot work with split function
// profileField.skills = c.split(",").map(skills => skills.trim())
// console.log(profileField.skills)
// to run node filename.js