如何解决 React Native 中的以下错误？

Question

我正在制作一个带有本机反应的应用程序。但是我有一个问题。

问题如下。

即使在文本输入中输入一个字符，它也会返回到初始状态，这是一个问题

这是我的代码。

import React, {useState, Compomen, useEffect} from 'react';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import {View, TextInput, StyleSheet, Text, TouchableOpacity, Image} from 'react-native';
import AsyncStorage from "@react-native-async-storage/async-storage";


function DetailScreen({ navigation, route }) {
  const { day } = route.params;
  const [title,setTitle] = useState("");

  const handleChangeTitle = (text) => {
    setTitle(text)
    _savediary();
  }

  const _readdiary = async () => {
    try {
      const hello = await AsyncStorage.getItem(dateString + "diary");
      if (hello == null) {
        setTitle("Write your day here.")
      }else{
        setTitle(hello);
      }
    } catch(error) {
      console.error(error);
    }
  }
  const _savediary = async () => {
    try {
      await AsyncStorage.setItem(dateString + "diary", title);
    } catch(error) {
      console.error(error);
    }
  }
  
  var dateString = "";
  for (var key in day) {
   console.log("key:" + key + "/" + day[key])
   dateString = day[key];
  }

  useEffect(() => {
    _readdiary();
  })

  return(
    <SafeAreaProvider>
      <View style={{flexDirection: 'column'}}>
        <View style={{flexDirection: 'row'}}>
          <Text style={styles.date}> {dateString}</Text>
          <TouchableOpacity activeOpacity={0.5} onPress={() => navigation.push('Mood', {day})}>
            <Image 
               source={require('./assets/select.png')}
               style={styles.sticker}
            />
          </TouchableOpacity>
        </View>
        <TextInput
            style={{padding: 10}}
            onChangeText={handleChangeTitle}
            editable
            multiline
            value={title}
          />
      </View>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  input_container: {
    borderWidth: 0.5,
    padding: 15,
    fontSize: 16,
    marginTop: 20,
    borderRadius: 50,
  },
  date: {
    fontSize: 30,
    width: "75%"
  },
  sticker: {
    height: 50,
    width: 50,
  },
  center: {
    flex: 1,
    alignItems: "center"
},
});

export default DetailScreen;

我认为这是一个代码流问题，但我不知道如何解决它。

代码流导致这个问题是否正确？

你知道如何解决这个问题吗？

知道的请回复。

谢谢。

Answer 1

你错误地使用了 useEffect 钩子。 _readdiary 函数每次都会被调用。 有第二个参数包括 [] 像这样：

  useEffect(() => {
    _readdiary();
  }, [])