TypeError: undefined is not a function ('...todos.map...' 附近)

Question

我正在尝试在 useState 挂钩中使用 ASyncStorage 从存储中加载数据（如果存在）。 我在 map 函数中渲染 todos，但在此之前我正在检查 todos 是未定义还是 []。 如果数据不存在但未定义，则逻辑应将 [] 返回到 useState！

Here is an image of the error

代码如下：

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 的默认状态会使用异步函数，这对我来说没有意义。相反，我会做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);
    }
  })();
},[]);