componentDidUpdate不断被调用

componentDidUpdate () {
this.showPosts();   
}
showPosts = async () => {
var userID = await AsyncStorage.getItem('userID');
fetch(strings.baseUri+"getPostWithUserID", {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({ 
"user_id": userID
})
})
.then((response) => response.json())
.then((responseJson) => {
let jsonObj = JSON.parse(JSON.stringify(responseJson));
if (jsonObj.status=="true") {
this.setState({ 
data: responseJson.data, 
imageSrc: responseJson.data.imgSrc,
});    
} 
else {       
this.setState({show: false});
}  
})      
}

我调用componentDidUpdate中的showPosts函数来显示我更新的平面列表。但是componentDidUpdate不断被调用。我应该使用shouldComponentUpdate吗？

=========================更新的代码==========================

这来自主屏幕

async componentDidMount () {
this._isMounted = true;
await this.showPosts();
}
componentDidUpdate () {
this.showPosts();   
}

showPosts = async () => {
try {    
var userID = await AsyncStorage.getItem('userID');
fetch(strings.baseUri+"getPostWithUserID", {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({ 
"user_id": userID
})
})
.then((response) => response.json())
.then((responseJson) => {
let jsonObj = JSON.parse(JSON.stringify(responseJson));
if (jsonObj.status=="true") {
this.setState({ 
data: responseJson.data, 
imageSrc: responseJson.data.imgSrc, 
});
} 
else {
if (this._isMounted) {
this.setState({show: false});
}
}  
})
.catch((error) => {
console.error(error);
});
}
catch (err) {
console.warn(err);
}
}
componentWillUnmount () {
this._isMounted = false;
}

这是图像描述屏幕，我将从这里导航回主屏幕

postData = async () => {
this.setState({loading: true});
var location = await AsyncStorage.getItem('location');
var path = await AsyncStorage.getItem('path');
var post_type = await AsyncStorage.getItem('post_type');
var userId = await AsyncStorage.getItem('userID');
var newPath = path.split("/");
var imageName = newPath[newPath.length-1];
const formData = new FormData();
var media = {
uri: path,
name: imageName,
type: 'image/jpg',
};
formData.append('image', media);
formData.append('user', userId);
formData.append('description',this.state.description);
formData.append('location',"usa");
formData.append('post_type',post_type);
formData.append('userprofile_picture',imageName);

fetch(strings.baseUri+"addPosts",{
method: 'POST',
headers: { 'Content-Type': 'multipart/form-data' },
body: formData,
})
.then((response) => response.json())
.then((responseJson) => {
let jsonObj = JSON.parse(JSON.stringify(responseJson));
if (jsonObj.status=="true") {  
this.props.navigation.popToTop() 
&& this.props.navigation.navigate('Home'); // This navigates me to the HomeScreen
} 
else {
} 
})
.catch((error) => {
console.error(error);
});
}

ComponentDidUpdate是一个更新生命周期挂钩，当组件状态或道具中发生更改时，将触发此更新。

进入您的代码：您正在将处理程序showPosts调用到setState，这将再次触发更新生命周期。

这将导致一个无限循环。

解决方案

如果您只想第一次加载帖子，请转到创作生命周期挂钩(componentDidMount)。

componentDidMount() { // This just gets called once in creational lifecycle //
this.showPosts();  }

如果你想让它总是有最新的数据，那么有两种方法
- 更新组件在同一个组件树分支中：，在这种情况下，很容易实现这一点。您可以将状态从更新组件传递到子组件hasprops，您的工作已经完成，或者如果他们是兄弟姐妹，则向上执行级别。您可以向上移动状态一级，并使其进入hasprops
- 更新组件在不同的组件树分支中：我建议使用REDUX，这是REDUX的主要用途

shouldComponentUpdate是的，如果需要，您可以使用它来验证数据和负载，但使用它时要小心，您的组件更新取决于其中的代码。

请检查https://reactjs.org/docs/react-component.html#shouldcomponentupdate

如果您在ComponentDidUpdate中这样做，并通过ComponentDidUpdate更新方法调用中的状态，则只需要以这种方式调用它，然后开始无限循环。

componentDidMount () {
this.showPosts();   
}

====================编辑================

如果你只想使用ComponentDidUpdate，那么你可以像这样使用它。

componentDidUpdate(prevProps, prevState) {
// only update if not match I don't know what's your data is so add a 
// simple check like we use for strings.
if (prevState.data !== this.state.data) {
this.showPosts();
}
}

只需使用prevState进行匹配。

你也可以这样做

通用父组件

创建一个新组件，比如Posts。

import React, { Component } from 'react';
import HomeScreen from '../../HomeScreen';
import ImageDescription from '../../ImageDescription';
class Posts extends Component {
constructor(){
super();
this.state = {
dataEditted: false;
}
}
newDataHandler = () =>{
this.setState({dataEditted:true}); // this is flag to identify that there is change in data //
}
resetnewDataHandler = () =>{
this.setState({dataEditted:false}); // this handler is used to reset the falg back to initial //
}
render () {
const homeScreen =  <HomeScreen editted={this.state.editted} resetHandler={this.resetnewDataHandler}/>;
const imageDescription = <ImageDescription newdataHandler={this.resetnewDataHandler}/>
return (
<div>
{homeScreen}
{imageDescription}
</div>
)
}
}
export default Posts;

该组件将充当在之间移动数据的桥梁。

每当ImageDescription组件中有新数据时，使用传递的newDataHandler使props更新公共父级，则dataEdited将被更新并传递给homeScreen组件，现在在homeScreen的componentDidUpdate中检查其是否为true，然后调用this.showPosts()，也调用resetnewDataHandler。

componentDidUpdate()在状态更改时被调用(调用setState())，如果您在同样位于componentDidUpdate()内部的showPosts中执行此操作，则将创建一个无限状态更新。

相关内容

最新更新

热门标签：