Question

我是React Native中的新成员，我正在做一个注释块，现在的问题是，一旦我单击“保存”，它就会将其保存到数组中，但是当我返回主屏幕时，会在其中显示保存的注释没有显示最后一个，直到我重新加载整个项目，我该如何重新渲染它？我已经看到我必须使用this.forceUpdate（），但是它也不起作用，这是代码：

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

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>
        </>    
    );
}

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

Answer 1

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

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

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

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

保存便笺后，您必须这样称呼： this.props.fetch_notes（）

Answer 2

您可以添加the.props.navigation.addListener。当您由于addListener从下一个屏幕返回到上一个屏幕而调用API时，请专注于当前屏幕，并且由于状态变化而呈现UI。

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

     this.fetch_notes() 

      }); 
    
      }

如何重新渲染组件？本机

2 个答案: