[英]How to avoid warning: Cannot setState on unmounted component? REACT-NATIVE
im builiding a notebloc, so each time I go to the Edit note screen
then go back, this warnings appears, heres the code:我正在构建一个notebloc,所以每次我去
Edit note screen
然后返回时,都会出现这个警告,代码如下:
when the app runs, the first component that rendes is Notes:当应用程序运行时,渲染的第一个组件是 Notes:
class Notes extends Component {
state = {
onpress: false,
array_notes: [],
selected_notes: [],
update: false,
}
note = "";
note_index = "";
note_number = "";
item_selected = 0;
onpress = false;
componentDidMount() {
const {navigation} = this.props;
this._unsubscribe = navigation.addListener("didFocus", () => this.fetch_notes());
}
componentWillUnmount() {
this._unsubscribe.remove();
}
fetch_notes = async() => { //fetch all the data
const data = await fetch_notes();
if (typeof data != "function") {
this.setState({array_notes: data.array_notes});
}else {
data();
}
}
as you can see, in the ComponentDidmount()
I run the function fetch_data
to set the data, heres the fetch_data function
:如您所见,在
ComponentDidmount()
我运行了fetch_data
函数来设置数据,这是fetch_data function
:
import AsyncStorage from "@react-native-community/async-storage";
export const fetch_notes = async () => {
try {
const data = JSON.parse(await AsyncStorage.getItem("data"));
if (data != null) {
return data;
}else {
return () => alert("with no data");
}
}catch (error) {
alert(error);
}
}
here everything works, because its only fetch the data, now when I go to edit note screen
and I edit one of the notes, I need to save it, so when I go back I need to fetch the data again so it will update:在这里一切正常,因为它只获取数据,现在当我去
edit note screen
并编辑其中一个笔记时,我需要保存它,所以当我回去时我需要再次获取数据以便它会更新:
save_changes = async() => {
try {
const data = JSON.parse(await AsyncStorage.getItem("data"));
const index_to_find = this.array_notes.findIndex(obj => obj.note_number === this.note[0].note_number);
const edited_note = this.note.map((note) => {
note.content = this.state.content;
return {...note}
});
this.array_notes.splice(index_to_find, 1, edited_note[0]);
data.array_notes = this.array_notes;
await AsyncStorage.setItem("data", JSON.stringify(data));
}catch(error) {
alert(error);
}
when I get back to Notes screen
the function runs and works, the data are updated, but the warning still appears, once I saved the edit note and go back, how can I avoid this?当我回到
Notes screen
该功能运行并工作,数据已更新,但警告仍然出现,一旦我保存了编辑备注并返回,我该如何避免这种情况?
This warning is thrown when you try to set the state of a component after it has unmounted.当您在卸载后尝试设置组件的状态时,会抛出此警告。
Now, some things to point out here现在,有些事情要在这里指出
Notes
--> Edit Notes
--> Notes
.Notes
--> Edit Notes
--> Notes
。 Assuming you are using the StackNavigator
from react-navigation
, the Notes
screen will not unmount when you navigate to Edit Notes
screen.react-navigation
的StackNavigator
,当您导航到“ Edit Notes
屏幕时,“ Notes
屏幕将不会卸载。Edit Notes
when you go back.Edit Notes
。 So you should check the code to verify that you don't have any asynchoronous setState
calls in that screen.setState
调用。 PS : The syntax to remove the focus
event listener is to just call the returned function as mentioned here . PS :删除
focus
事件侦听器的语法是只调用此处提到的返回函数。 So in your Notes
screen inside componentWillUnmount
it should be因此,在
componentWillUnmount
内的Notes
屏幕中,它应该是
componentWillUnmount() {
this._unsubscribe();
}
you need to use componentWillUnmount() function inside the function which you are unmounting.您需要在要卸载的函数中使用 componentWillUnmount() 函数。
You can use conditional rendering for mounting or unmounting any componets.您可以使用条件渲染来安装或卸载任何组件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.