React Native-如何显示使用AsyncStorage存储的数组项目中的数据

Question

我正在开发一个简单的任务应用程序（To Do App）。 目前，为每个任务（输入中键入的文本）创建具有唯一ID的新对象的过程正在正常进行， 但是我不确定如何简单地从列表对象中的每个对象内部显示信息“文本”。 我创建了要显示的List对象，但我认为我使用了错误的方式或数据来显示我想要的内容。

export default class Main extends Component {
  state = {
    newUser: '',
    users: ['wagner'],
  };

  handleAddUser = () => {
    //console.tron.log(this.state.newUser);

    const newUser = this.state.newUser;
    const { users } = this.state;

    //console.tron.log(newUser);
    // Check newUser (input) and create a new object
    if (newUser !== '') {
      this.setState(prevState => {
        const id = uuid();
        const newItemObject = {
          [id]: {
            id,
            isCompleted: false,
            text: newUser,
            createdAt: Date.now(),
          },
        };
        console.tron.log(newItemObject);
        console.tron.log(newItemObject[id].text);

        // store the new state on the array
        const newState = {
          ...prevState,
          newUser: '',
          users: {
            ...prevState.users,
            ...newItemObject,
          },
        };

        this.saveItems(newState.users);
        return { ...newState };
        console.tron.log(users);
      });
    }
  };

  saveItems = newItem => {
    const saveItem = AsyncStorage.setItem('To Dos', JSON.stringify(newItem));
  };

  //console.tron.log(this.state.users);

  render() {
    const { users, newUser, newState } = this.state;
    const { navigate } = this.props.navigation;

    return (
      <Container>
        <Form>
          <Input
            placeholder="Add a new task"
            value={newUser}
            onChangeText={text => this.setState({ newUser: text })}
            onSubmitEditing={this.handleAddUser}
          />
          <SubmitButton onPress={this.handleAddUser}>
            <Icon name="add" size={20} color="#eee" />
          </SubmitButton>
        </Form>

        <List
          data={users}
          keyExtractor={user => user.id}
          renderItem={({ item }) => (
            <Task>
              {item.text}
              <Text>Test</Text>
            </Task>
          )}
        />       
      </Container>
    );
  }
}

构建列表和任务的我的样式文件：

export const List = styled.FlatList.attrs({
  showVerticalScrollIndicator: false,
})`
  margin-top: 20px;
`;

export const Task = styled.View`
  align-items: center;
  margin: 0 20px 30px;
`;