[英]React - componentWillReceiveProps condition doesn't render the data in the component
I have a component with componentWillReceiveProps
live cycle method.我有一个带有componentWillReceiveProps
实时循环方法的componentWillReceiveProps
。 inside the component, I can an action creator.在组件内部,我可以成为一个动作创建者。
As far as I understand the componentWillReceiveProps
renders the component every second.据我了解componentWillReceiveProps
呈现组件的每一秒。 for that reason I added a condition to activate the component render only when this.props
does not equal prevProps
.出于这个原因,我添加了一个条件,仅当this.props
不等于prevProps
时才激活组件渲染。
for some reason every time the props are updated the this.props.fetchCourses();
出于某种原因,每次道具更新时this.props.fetchCourses();
inside the componentWillReceiveProps
is not rendered.在componentWillReceiveProps
内部不呈现。 as well I don't see the console.log result.What points that the block is not p以及我没有看到 console.log 结果。什么点表明块不是 p
I am using fast-deep-equal
library to compare the objects but I am open to suggestions.我正在使用fast-deep-equal
库来比较对象,但我愿意接受建议。
my question is why the component does not render when props are updated.我的问题是为什么更新 props 时组件不呈现。
import React, { Component } from "react";
import { connect } from "react-redux";
import equal from "fast-deep-equal";
import { fetchCourses, deleteCourse } from "../../actions";
class Courses extends Component {
componentDidMount() {
this.props.fetchCourses();
}
componentWillReceiveProps(prevProps) {
console.log(this.props.courses);
console.log(prevProps.courses);
if (!equal(this.props.courses, prevProps.courses)) {
this.props.fetchCourses();
}
}
render() {
const prevProps = prevProps => {
console.log("this.props", this.props.courses.length);
console.log("prevProps ", prevProps.courses.length);
};
const courses = this.props.courses.map(course => {
return (
<tr key={course && course.id}>
<td>
{course.coursename}- {course && course.id}
</td>
<td>{course.coursetype ? "yes" : "no"}</td>
<td>{course.courseweeklyhours}</td>
<td>
<button
onClick={() => this.props.deleteCourse(course && course.id)}
>
הסר
</button>
</td>
</tr>
);
});
return <tbody>{courses}</tbody>;
}
}
const mapStateToProps = state => {
console.log("state ", state);
return {
courses: state.courses
};
};
export default connect(
mapStateToProps,
{ fetchCourses, deleteCourse }
)(Courses);
my suggestion is you really do not want componentWillReciveProps() to trigger the fetch course... whenever you do operation like (create, update, delete , etc..) in courses, trigger the fetch course action after each functionality.. it will automatically update the redux-store and component(Courses) will update automatically.我的建议是你真的不希望 componentWillReciveProps() 触发 fetch 课程......每当你在课程中执行(创建,更新,删除等)等操作时,在每个功能之后触发 fetch course 动作......它会自动更新 redux-store 和组件(课程)将自动更新。
handleCreateCourse = async (values)=>{
//logics for create courses and api call
await createCourse(values);
//trigger your fetchCourses action here
//it will update your other components where you listened courses from redux.
this.props.fetchCourses();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.