Javascript 正在调用但未命中的操作
我正在使用MERN stack和redux,我创建了一个findOneAndUpdate api,并在Postman上进行了测试。所有的工作,因为它应该,但我不能让它在我的网站上工作。它实际上从未点击updateSubject操作。我传递的数据有误吗?有人知道我错过了什么吗 行动Javascript 正在调用但未命中的操作,javascript,reactjs,redux,react-redux,mern,Javascript,Reactjs,Redux,React Redux,Mern,我正在使用MERN stack和redux,我创建了一个findOneAndUpdate api,并在Postman上进行了测试。所有的工作,因为它应该,但我不能让它在我的网站上工作。它实际上从未点击updateSubject操作。我传递的数据有误吗?有人知道我错过了什么吗 行动 export const updateSubject = (id, rate, noOfVotes, rating) => (dispatch) => { console.log("updat
export const updateSubject = (id, rate, noOfVotes, rating) => (dispatch) => {
console.log("updateSubject hitting");
fetch(`/api/subjects/Subject/${id}/${rate}/${noOfVotes}/${rating}`)
.then((res) => res.json())
.then((subject) =>
dispatch({
type: UPDATE_SUBJECT,
subjects: subject,
})
);
};
原料药
组成部分
import React, { Component } from "react";
import PropTypes from "prop-types";
import GoogleSearch from "./GoogleSearch";
import { connect } from "react-redux";
import { fetchSubjects } from "../../actions/subject";
import { fetchComments } from "../../actions/comment";
import { updateSubject } from "../../actions/subject";
class Subject extends Component {
// on loading the subjects and comments
// are fetched from the database
componentDidMount() {
this.props.fetchSubjects();
this.props.fetchComments();
}
constructor(props) {
super(props);
this.state = {
// set inital state for subjects description
// and summary to invisible
viewDesription: -1,
viewSummary: -1,
comments: [],
};
}
componentWillReceiveProps(nextProps) {
// new subject and comments are added to the top
if (nextProps.newPost) {
this.props.subjects.unshift(nextProps.newPost);
}
if (nextProps.newPost) {
this.props.comments.unshift(nextProps.newPost);
}
}
clickHandler = (id) => {
// when a subject title is clicked pass in its id
// and make the desciption visible
const { viewDescription } = this.state;
this.setState({ viewDescription: viewDescription === id ? -1 : id });
// add relevant comments to the state
var i;
var temp = [];
for (i = 0; i < this.props.comments.length; i++) {
if (this.props.comments[i].subject === id) {
temp.unshift(this.props.comments[i]);
}
}
this.setState({
comments: temp,
});
// save the subject id to local storage
// this is done incase a new comment is added
// then the subject associated with it can be retrieved
// and added as a property of that comment
localStorage.setItem("passedSubject", id);
};
// hovering on and off subjects toggles the visibility of the summary
hoverHandler = (id) => {
this.setState({ viewSummary: id });
};
hoverOffHandler = () => {
this.setState({ viewSummary: -1 });
};
rateHandler = (id, rate) => {
var currRate;
var currVotes;
var i;
for (i = 0; i < this.props.subjects.length; i++) {
if (this.props.subjects[i]._id === id) {
currRate = this.props.subjects[i].rating;
currVotes = this.props.subjects[i].noOfVotes;
}
}
updateSubject(id, rate, currVotes, currRate);
console.log(id, rate, currVotes, currRate);
};
findAuthor(id) {
// search users for id return name
}
render() {
const subjectItems = this.props.subjects.map((subject) => {
// if the state equals the id set to visible if not set to invisible
var view = this.state.viewDescription === subject._id ? "" : "none";
var hover = this.state.viewSummary === subject._id ? "" : "none";
var comments = this.state.comments;
return (
<div key={subject._id}>
<div
className="subjectTitle"
onClick={() => this.clickHandler(subject._id)}
onMouseEnter={() => this.hoverHandler(subject._id)}
onMouseLeave={() => this.hoverOffHandler()}
>
<p className="title">{subject.title}</p>
<p className="rate">
Rate this subject:
<button onClick={() => this.rateHandler(subject._id, 1)}>
1
</button>
<button onClick={() => this.rateHandler(subject._id, 2)}>
2
</button>
<button onClick={() => this.rateHandler(subject._id, 3)}>
3
</button>
<button onClick={() => this.rateHandler(subject._id, 4)}>
4
</button>
<button onClick={() => this.rateHandler(subject._id, 5)}>
5
</button>
</p>
<p className="rating">
Rating: {(subject.rating / subject.noOfVotes).toFixed(1)}/5
</p>
<p className="summary" style={{ display: hover }}>
{subject.summary}
</p>
</div>
<div className="subjectBody " style={{ display: view }}>
<div className="subjectAuthor">
<p className="author" style={{ fontWeight: "bold" }}>
Subject created by: {subject.author} on {subject.date}
</p>
</div>
<div className="subjectDescription">
<p className="description">{subject.description}</p>
</div>
<div className="subjectLinks">Links:</div>
<div className="subjectComments">
<p style={{ fontWeight: "bold" }}>Comments:</p>
{comments.map((comment, i) => {
return (
<div key={i} className="singleComment">
<p>
{comment.title}
<br />
{comment.comment}
<br />
Comment by : {comment.author}
</p>
</div>
);
})}
<a href="/addcomment">
<div className="buttonAddComment">ADD COMMENT</div>
</a>
</div>
</div>
</div>
);
});
return (
<div id="Subject">
<GoogleSearch />
{subjectItems}
</div>
);
}
}
Subject.propTypes = {
fetchSubjects: PropTypes.func.isRequired,
fetchComments: PropTypes.func.isRequired,
subjects: PropTypes.array.isRequired,
comments: PropTypes.array.isRequired,
newPost: PropTypes.object,
};
const mapStateToProps = (state) => ({
subjects: state.subjects.items,
newSubject: state.subjects.item,
comments: state.comments.items,
newComment: state.comments.item,
});
// export default Subject;
export default connect(mapStateToProps, { fetchSubjects, fetchComments })(
Subject,
Comment
);
import React,{Component}来自“React”;
从“道具类型”导入道具类型;
从“/GoogleSearch”导入GoogleSearch;
从“react redux”导入{connect};
从“../../actions/subject”导入{fetchSubjects}”;
从“../../actions/comment”导入{fetchComments};
从“../../actions/subject”导入{updateSubject}”;
类主题扩展组件{
//关于加载主题和注释
//是从数据库中提取的
componentDidMount(){
this.props.fetchSubjects();
this.props.fetchComments();
}
建造师(道具){
超级(道具);
此.state={
//设置主题描述的初始状态
//并对其进行了总结
视图描述:-1,
视图摘要:-1,
评论:[],
};
}
组件将接收道具(下一步){
//新主题和评论添加到顶部
如果(nextrops.newPost){
this.props.subjects.unshift(nextrops.newPost);
}
如果(nextrops.newPost){
this.props.comments.unshift(nextrops.newPost);
}
}
clickHandler=(id)=>{
//单击主题标题时,传入其id
//并使描述可见
const{viewsdescription}=this.state;
this.setState({viewscription:viewscription==id?-1:id});
//向州政府添加相关评论
var i;
var-temp=[];
对于(i=0;i{
this.setState({viewSummary:id});
};
hoverOffHandler=()=>{
this.setState({viewSummary:-1});
};
rateHandler=(id,rate)=>{
货币汇率;
无表决权;
var i;
对于(i=0;i{
//如果状态等于设置为可见(如果未设置为不可见)的id
var view=this.state.viewsdescription==subject.\u id?“:“无”;
var hover=this.state.viewSummary==subject.\u id?“:“无”;
var注释=this.state.comments;
返回(
this.clickHandler(subject.\u id)}
onMouseCenter={()=>this.hoverHandler(subject.\u id)}
onMouseLeave={()=>this.hoverOffHandler()}
>
{subject.title}
对该主题进行评分:
this.rateHandler(subject.\u id,1)}>
1.
this.rateHandler(subject.\u id,2)}>
2.
this.rateHandler(subject.\u id,3)}>
3.
this.rateHandler(subject.\u id,4)}>
4.
this.rateHandler(subject.\u id,5)}>
5.
评级:{(subject.Rating/subject.noOfVotes.toFixed(1)}/5
{主题摘要}
主题创建人:{Subject.author}在{Subject.date}
{subject.description}
链接:
注释:
{comments.map((comment,i)=>{
返回(
{comment.title}
{comment.comment}
评论人:{Comment.author}
);
})}
);
});
返回(
{subjectItems}
);
}
}
Subject.propTypes={
fetchSubjects:PropTypes.func.isRequired,
fetchComments:PropTypes.func.isRequired,
主题:PropTypes.array.isRequired,
注释:需要PropTypes.array.isRequired,
newPost:PropTypes.object,
};
常量mapStateToProps=(状态)=>({
主题:state.subjects.items,
newSubject:state.subjects.item,
注释:state.comments.items,
新成员:state.comments.item,
});
//导出默认主题;
导出默认连接(MapStateTops,{fetchSubjects,fetchComments})(
主题,,
评论
);
您没有将updateSubject
附加到组件本身,目前您只有fetchsubject
和fetchComments
因此,您需要更改连接函数,如下所示:
export default connect(mapStateToProps, { fetchSubjects, fetchComments, updateSubject })(
Subject,
Comment
);
然后您的调用函数可以更改如下:
rateHandler = (id, rate) => {
const subject = this.props.subjects.find( subject => subject._id === id);
// when no subject was found, the updateSubject won't be called
subject && this.props.updateSubject( id, rate, subject.noOfVotes, subject.rating );
};
这也意味着你应该更新你的信息
rateHandler = (id, rate) => {
const subject = this.props.subjects.find( subject => subject._id === id);
// when no subject was found, the updateSubject won't be called
subject && this.props.updateSubject( id, rate, subject.noOfVotes, subject.rating );
};
Subject.propTypes = {
fetchSubjects: PropTypes.func.isRequired,
fetchComments: PropTypes.func.isRequired,
updateSubject: PropTypes.func.isRequired,
subjects: PropTypes.array.isRequired,
comments: PropTypes.array.isRequired,
newPost: PropTypes.object,
};
export const updateSubject = (id, rate, noOfVotes, rating) => (dispatch) => {
console.log("updateSubject hitting");
fetch(`/api/subjects/Subject/${id}/${rate}/${noOfVotes}/${rating}`, { method: 'PUT' })
.then((res) => res.json())
.then((subject) =>
dispatch({
type: UPDATE_SUBJECT,
subjects: subject,
})
);
};