子零部件如何强制其父零部件重新加载?React.js

Question

TLTR：我希望子组件能够刷新整个父组件及其自己的子组件，以便它们在自己的componentDidMount函数中发出初始http请求。当调用props中给定的函数时，我试图在父组件中setState｛…prevState｝，但它不会触发子组件的componentDidMount中的http请求，我甚至不认为它会导致任何重新渲染。我也尝试过this.forceUpdate((，但也不起作用。

我有一个名为LikesCommentsNumbers的父组件，我把子组件Like、Like(prop:anouse(和comment放在那里。它们中的每一个都管理自己的状态，并发出HTTP请求以获取点赞数量以及是否应该填充点赞图标(这意味着用户已经点赞了某个东西(。

在按下喜欢/不喜欢时，发出HTTP调用，其中喜欢的计数增加，不喜欢的计数减少(如果用户按下喜欢按钮，反之亦然，如果他按下不喜欢按钮(。

我的观点是，如何清理？

当用户按下喜欢/不喜欢按钮时，我希望组件强制整个父组件再次刷新/调用数据。我尝试了很多方法，试图在父组件的props中给定的子组件中执行一个函数，这将使父组件setState｛…prevState｝，并希望刷新所有子组件，但它没有起作用。This.forceUpdate也不起作用。如何使所有子级的componentDidMount(((其中是我的http请求(函数再次运行？

我的组件结构：

[！[在此输入图像描述][1]][1]

点赞评论数字：

import axios from 'axios';
import { FaCommentAlt } from 'react-icons/fa';
import Like from '../UI/like';
import classes from './likesCommentsNumbers.module.css';
import getToken from '../../getToken';
class LikesCommentsNumbers extends Component {
constructor(props){
super(props);
let token = getToken();
this.state = {
objectId: props.objectId,
userId: props.userId,
token: token,
numberOfComments: 0,
LikeRefresh: false,
DislikeRefresh: false,
}
this.actionCleanUp.bind(this);
}
componentDidMount() {
if(this.props.comments){
axios({
method: 'post',
url: "http://localhost:3001/comments/getNumber",
headers: {'Authorization': this.state.token},
data: {
blogId: this.state.objectId
}
})
.then((res)=>{
if(res.status===200){
this.setState({numberOfComments: res.data.count});
return;
}
})
.catch(error => {
console.log(error);
})
}
}
actionCleanUp = (type) => {
this.setState((prevState) => {
return ({...prevState});
})
}
render() { 
let commentIcon = null;
if(this.props.comments){
commentIcon = (
<div className={classes.iconDataContainer}>
<FaCommentAlt size="1em" color="#0a42a4" className={classes.icon}/>
<p>{this.state.numberOfComments}</p>
</div>
)
}
let dislikeclasses = classes.iconDataContainer;
if(!this.props.comments){
dislikeclasses = [classes.iconDataContainer, classes.movetoleft].join(" ")
}
let innerContainer = classes.numberInfoInnerContainer;
if(this.props.small){
innerContainer = [classes.numberInfoInnerContainer, classes.small].join(" ");
}
return (
<div className={classes.numberInfoContainer}>
<div className={innerContainer}>
<div className={[classes.iconDataContainer, classes.likeIconPContainer].join(" ")}>
<Like
refresh={this.state.LikeRefresh} 
objectIsBlog={this.props.objectIsBlog} 
token={this.state.token} 
authorId={this.state.userId} 
objectId={this.state.objectId} 
cleanUp={this.actionCleanUp}
size="1.5em" 
color="#0a42a4" 
className={classes.icon}/>
</div>
<div className={dislikeclasses}>
<Like
refresh={this.state.DislikeRefresh} 
dislike 
objectIsBlog={this.props.objectIsBlog} 
token={this.state.token} 
authorId={this.state.userId} 
objectId={this.state.objectId} 
cleanUp={this.actionCleanUp}
size="1.5em" 
color="#0a42a4" 
className={classes.icon}/>
</div>
{commentIcon}
</div>
</div>
);
}
}

export default LikesCommentsNumbers;```

Like.js:

//componentDidMount:
componentDidMount(){
this.getData(); //http request to get number
this.handleFill(); //http request to check if liked already
}
//sendAction function: 
sendAction = (like) => {
if(this.props.objectIsBlog){
let url = "http://localhost:3001/blogLike/upvote";
if(this.props.dislike) url = "http://localhost:3001/blogLike/downvote";    
axios({
method: 'post',
url: url,
headers: {'Authorization': this.state.token},
data: { blogId: this.state.objectId }
})
.then((res)=>{
if(res.status===201 || res.status===200){
if(like){
this.props.cleanUp("like");
}
else {
this.props.cleanUp("dislike");
}
}
// this.setState({redirect: true})
// window.location.reload();
this.props.cleanUp();
})
.catch(error => {
console.log(error);
})
}
else{
let url = "http://localhost:3001/commentLike/upvote";
if(this.props.dislike) url = "http://localhost:3001/commentLike/downvote";

axios({
method: 'post',
url: url,
headers: {'Authorization': this.state.token},
data: { commentId: this.state.objectId }
})
.then((res)=>{
if(res.status===200){
this.setState((prevState) => {
return ({
...prevState,
number: res.data.count
})
})
}
})
.catch(error => {
console.log(error);
})
}
}
//render function:
let content;

if(this.props.dislike && this.state.DislikeFill){
content = <AiFillDislike 
size={this.props.size} 
color={this.props.color} 
onClick={() => this.sendAction(false)}/>;
}
else if(this.props.dislike && !this.state.DislikeFill){
content = <AiOutlineDislike 
size={this.props.size} 
color={this.props.color} 
onClick={() => this.sendAction(false)}/>;
}
else if(this.state.LikeFill){
content = <AiFillLike 
size={this.props.size} 
color={this.props.color} 
onClick={() => this.sendAction(true)}/>;
}
else if(!this.state.LikeFill){
content = <AiOutlineLike 
size={this.props.size} 
color={this.props.color} 
onClick={() => this.sendAction(true)}/>;
}
return (
<div className={classes.likeContainer}>
{content}
<p className={classes.likeP}>{this.state.number}</p>
</div>
);

[1]: https://i.stack.imgur.com/xjk3G.png

Answer 1

在父组件中创建一个新函数：

updateFromChild((｛this.setState(｛//更新您想要的任何状态｝(。

然后在渲染子组件时传递该函数：

LikeRefresh=｛this.state.LikeRefresh｝objectIsBlog=｛this.props.objectIsBlog｝…updateFromChild=｛this.updateFromChild｝/>

在子组件中，当类似组件被命中时，或者每当您想要更新父组件时使用

this.props.updateFromChild((并且它将更新整个父组件。