在我开始使用shouldComponentUpdate之前，我曾使用this.forceUpdate()，但这根本不起作用。因此，我调查了shouldComponentUpdate，发现它可以重新渲染状态（如果已更改）。就我而言，状态改变后，我需要更新数字和动画。这是我的代码：
shouldComponentUpdate(nextProps, nextState){
return nextState.user_image != this.state.user_image
}
这个问题是，当我使用它时，整个屏幕变成白色。在页面加载之前。
user_image包含一组来自mysql数据库的数据，我有一列称为points。
componentDidUpdate(prevProps, prevState) {
if (!prevState.dataSource) {
fetch(`https://www.example.com/React/profile.php${this.state.log}` , {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
}
})
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
user_image: responseJson[0].user_images.map(item => ({ ...item, progress: new Animated.Value(0), unprogress: new Animated.Value(1) }))
},function() {
});
})
.catch((error) => {
//console.error(error);
});
}
}
我之所以拥有componentDidUpdate的原因是因为this.state.log需要重新渲染一次才能包含其中的内容。但是，使用此方法不会使user_image的数量和动画更新一次，请单击动画。 注意：如果我不带参数使用componentDidUpdate，则会发生2种情况。 1）应用程序的性能下降了很多，因为它不断重新渲染。2）当我转到动画时，它实际上会更新编号和动画。 （我在寻找什么！）
以下是动画：
/* Shows the starting point of the animation and is ready to use */
anim_star = (item) => {
//console.log(item.id);
Animated.timing(item.progress, {
toValue: 1,
duration: 2000,
easing: Easing.linear,
}).start();
fetch(`https://www.example.com/React/star.php`, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
post_id : item.id,
})
}).then((response) => response.json())
.then((responseJson) => {
}).catch((error) => {
console.warn(error);
});
}
/* Shows a finished animation and is ready to restart it */
anim_unstar = (item) => {
//console.log(item.id);
Animated.timing(item.unprogress, {
toValue: 1,
duration: 2000,
easing: Easing.linear,
}).reset();
fetch(`https://www.example.co/React/unstar.php`, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
post_id : item.id,
})
}).then((response) => response.json())
.then((responseJson) => {
}).catch((error) => {
console.warn(error);
});
}
最后，这是其余的代码：
<-- Animations need to change once the state has changed -->
{this.state.id.includes(item.id) ?
<TouchableOpacity
onPress={() => this.anim_unstar(item)}>
<Animation
progress={item.unprogress}
source={require('../Animations/favourite_app_icon.json')}
/>
</TouchableOpacity>
:
<TouchableOpacity
onPress={() => this.anim_star(item)}>
<Animation
progress={item.progress}
source={require('../Animations/favourite_app_icon.json')}
/>
</TouchableOpacity>
}
<Text>{item.points}</Text> <-- This needs to update when state is changed
如何获取这些更新？