類型錯誤：未定義不是函數（靠近“...todos.map...”）

Question

我試圖在 useState 鈎子內使用 ASyncStorage 從存儲加載數據（如果存在）。 我在 map 函數中渲染 todos，但在此之前我正在檢查 todos 是 undefined 還是 []。 如果數據不存在，邏輯應該返回 [] 到 useState 但它給出 undefined！

這是錯誤的圖像

這是代碼：

export default function App() {
  const [todo, setTodo] = useState('');

  const [todos, setTodos] = useState(async () => {
    try {
      const value = await AsyncStorage.getItem('@MySuperStore:key');
      // We have data!!
      return value ? JSON.parse(value) : [];
    } catch (error) {
      // Error retrieving data
      console.log(error);
    }
  });

  const addItem = (newTodo) => {
    if (newTodo.length === 0) {
      Alert.alert(
        'Enter a String',
        'You have entered a string with 0 characters',
        [{ text: 'Okay', style: 'default' }]
      );
    } else {
      console.log(newTodo);
      let newTodos = [newTodo, ...todos];
      setTodo('');

      _storeData(newTodos).then(_retrieveData());

      // setTodos(newTodos);
    }
  };

  const deleteTodo = (idx) => {
    setTodos(todos.filter((todo, id) => id !== idx));
  };

  const _storeData = async (value) => {
    try {
      await AsyncStorage.setItem('@MySuperStore:key', JSON.stringify(value));
    } catch (error) {
      // Error saving data
      console.log(error);
    }
  };

  const _retrieveData = async () => {
    try {
      const value = await AsyncStorage.getItem('@MySuperStore:key');
      if (value !== null) {
        // We have data!!
        setTodos(JSON.parse(value));
        console.log(value);
      }
    } catch (error) {
      // Error retrieving data
      console.log(error);
    }
  };

  return (
    <TouchableWithoutFeedback
      onPress={() => {
        Keyboard.dismiss();
      }}
    >
      <View style={styles.outerContainer}>
        <Text style={styles.header}>TODO</Text>
        <View style={styles.container}>
          <TextInput
            placeholder='new todo'
            style={styles.input}
            value={todo}
            onChangeText={(text) => {
              setTodo(text);
            }}
          ></TextInput>
          <Button title='Add' onPress={() => addItem(todo)}></Button>
        </View>
        <ScrollView style={styles.scrollView}>
          {todos === [] || todos === undefined ? (
            <View>
              <Text>Add a todo!</Text>
            </View>
          ) : (
            todos.map((todo, idx) => (
              <View style={styles.todo} key={idx}>
                <Text style={styles.todoText}>{todo}</Text>
                <View style={styles.delete}>
                  <Button
                    color='red'
                    title='Delete'
                    onPress={() => deleteTodo(idx)}
                  ></Button>
                </View>
              </View>
            ))
          )}
        </ScrollView>
      </View>
    </TouchableWithoutFeedback>
  );
}

Answer 1

我不確定為什么todos的默認狀態會使用 async 函數，這對我來說沒有意義。 相反，我會做const [todos, setTodos] = useState([]); 並利用useEffect鈎子類似於以下內容：

useEffect(() => {
  (async () => {
      try {
      const value = await AsyncStorage.getItem('@MySuperStore:key');
      // We have data!!
      setTodos(value ? JSON.parse(value) : [])
    } catch (error) {
      // Error retrieving data
      console.log(error);
    }
  })();
},[]);