如何重新渲染组件？ REACT-NATIVE

Question

我是 React Native 的新手，我正在做一个笔记块，现在的问题是，一旦我点击保存，它就会将其保存到数组中，但是当我回到主屏幕时，我会在其中显示已保存的笔记，但它不会显示最后一个，直到我重新加载整个项目，我该怎么做才能重新渲染它？ 我已经看到我必须使用 this.forceUpdate()，但它也不起作用，代码如下：

这是主屏幕，用户将看到的第一个屏幕，它显示调用组件注释保存的注释

render() {
    return (
        <>
        <View style = {this.styles.container}>
            <View>
                <Text style = {this.styles.Text}>Welcome to home!</Text>
            </View>
            <Notes></Notes>
            <View style = {this.styles.View}>
                <Button title = "Create new note" styles = {this.styles.Button} onPress = {() => this.props.navigation.navigate("Create_note")}></Button>
            </View>
            <View style = {this.styles.View}>
                <Button title = "Notes" styles = {this.styles.Button} onPress = {() =>this.props.navigation.navigate("See_notes")}></Button>
            </View>
        </View>
        </>
    );
}

继承人组件注意事项：

class Notes extends Component {

constructor(props) {
    super(props);
    this.state = {
        array_notes: [],
    }
}

componentDidMount() {
    this.fetch_notes();
}

fetch_notes = async() => {
    try {
        const data = await AsyncStorage.getItem("array_notes");
        if (data != null) {
            const array_notes = JSON.parse(data);
            this.setState({array_notes: array_notes});
        }else {
            console.log("with no data");
        }
    }catch (error) {
        console.log(error);
    }
}

render() {
   return (
       <>
       <View style = {this.styles.View}>
            <FlatList data = {this.state.array_notes} renderItem = {({item}) => (<Text style = {this.styles.Text}>{item.title}</Text>)} keyExtractor = {(item) => item.title}></FlatList>
       </View>
        </>
    );
}

这里是创建一个新的笔记屏幕，用户在其中输入一个新的笔记：

class Create_note extends Component {
    constructor() {
    super();
    this.state = {
        title: "",
        content: "",
    }
  }

save_Data = async() => {
    try {
        const array_notes = await AsyncStorage.getItem("array_notes");
        if (array_notes === null) {
            const array_notes = [];
            await AsyncStorage.setItem("array_notes", JSON.stringify(array_notes));
        }else {
            const new_note = {'title': this.state.title, 'content': this.state.content};
            const array_notes = JSON.parse(await AsyncStorage.getItem("array_notes"));
            array_notes.push(new_note);
            await AsyncStorage.setItem("array_notes", JSON.stringify(array_notes));
        }
    }catch(error) {
        console.log(error);
    }
}

}
render() {
    return  (
        <>
        <Text style = {this.styles.Text }>Welcome to Shum Note!</Text>
        <View>
            <TextInput style = {this.styles.TextInput_title} placeholder = "Title" multiline = {true} maxLength = {80} onChangeText = {(title) => this.setState({title: title})}></TextInput>
            <TextInput style = {this.styles.TextInput_content} placeholder = "Content" multiline = {true} onChangeText = {(content) => this.setState({content: content})}></TextInput>
            <Button title = "Save" onPress = {this.save_Data}></Button>
        </View>
        <View style = {this.styles.back_Button}>
            <Button title = "Go back home" onPress = {() => this.props.navigation.navigate("Home")}></Button>
        </View>
        </>    
    );
}

一旦我保存了新笔记并按下 go 回到家它不会显示最后一个，直到像我说的那样，我重新加载整个项目，但奇怪的是，如果我 go 到 create_note 屏幕，它每次都会重新渲染，但它不会发生在家里，为什么？

Answer 1

您必须将 fetch_notes作为 Create_note 中的道具传递。

this.props.navigation.navigate("Create_note", fetch_notes: this.fetch_notes)

在您的 Create_note 中，从导航中获取 function。

 const { fetch_notes} = this.props.route.params; //https://reactnavigation.org/docs/params/ 

保存笔记后，你必须这样称呼它： this.props.fetch_notes()

Answer 2

您可以添加the.props.navigation.addListener 。 当您从下一个屏幕返回到上一个屏幕时，API 调用，因为 addListener 焦点在当前屏幕上，并且 UI 被渲染，因为 state 更改。

componentDidMount() {  
     
    this.focusListener =
this.props.navigation.addListener("didFocus", () => {

     this.fetch_notes() 

      }); 
    
      }