使用AWS Amplify和graphQL在react-native应用程序中删除记录时出错

Question

我的应用程序有2个屏幕，分别是Homescreen和DetailsS​​creen。 HomeScreen列出了数据库中当前存在的项目。用户可以单击与每个项目关联的详细信息按钮或删除按钮。当他们单击详细信息按钮时，将被带到详细信息屏幕，在该屏幕中，他们可以看到有关其所在项目的其他详细信息。此功能运行正常。但是，当我单击删除按钮时，无法使deleteTodo函数正常执行。

我尝试了几种方法来提取deleteTodo函数中的单个项目，以将其传递给我的graphQL突变，但是没有运气。 graphQL突变如下：

     type Mutation {
      createTodo(input: CreateTodoInput!): Todo
      updateTodo(input: UpdateTodoInput!): Todo
      deleteTodo(input: DeleteTodoInput!): Todo
     }

     class HomeScreen extends React.Component {
     state = { name: '', date: '', location: '', organizer: '',
                    sections:'', link:'', description:'', todos: [] }
     async componentDidMount () {
     try {
      const graphqldata = await
              API.graphql(graphqlOperation(listTodos))
      console.log('graphqldata:', graphqldata)
      this.setState({ todos: graphqldata.data.listTodos.items })
     } catch (err) {
      console.log('error: ', err)
     }
     }
     onChangeText = (key, val) => {
      this.setState({ [key]: val })
     }
     createTodo = async () => {
     const todo = this.state
     if (todo.name === '' || todo.date === '' || todo.description === 
     '') return
     const todos = [...this.state.todos, todo]
     this.setState({ todos, name: '', date: '', location: '', organizer:
     '' })
     try {
      await API.graphql(graphqlOperation(createTodo, todo))
      console.log('event successfuly created.')
       } catch (err) {
      console.log('error creating event...', err)
      }
      }
      deleteTodo = async () => {
      const todels = this.state
      const todo = todels.todo
      const index = todels.index
       //if (todo.name === '' || todo.date === '' || todo.description 
      === '') return
      const todel = [...this.state.todos.map((todo, index)), todels]
      //this.setState({ todos, name: '', date: '', location: '',
     organizer: '', sections: '', link: '', description:'' })
     //console.log('What am I deleting??', todo)
     try {
      await API.graphql(graphqlOperation(deleteTodo, todel))
      console.log('event successfuly deleted')
      } catch (err) {
      console.log('error deleting event...', err)
      console.log('What am I deleting??', todel)
      }
      }
      render() {
      return (
      <ScrollView style={styles.container}>

        <TextInput
          style={styles.input}
          onChangeText={val => this.onChangeText('name', val)}
          placeholder="Event Name"
          value={this.state.name}
        />
        <TextInput
          style={styles.input}
          onChangeText={val => this.onChangeText('date', val)}
          placeholder="Date"
          value={this.state.date}
        />
        <TextInput
          style={styles.input}
          onChangeText={val => this.onChangeText('location', val)}
          placeholder="Location"
          value={this.state.location}
        />
        <TextInput
          style={styles.input}
          onChangeText={val => this.onChangeText('organizer', val)}
          placeholder="Organizer"
          value={this.state.organizer}
        />
        <TextInput
          style={styles.input}
          onChangeText={val => this.onChangeText('sections', val)}
          placeholder="Sections"
          value={this.state.sections}
        />
        <TextInput
          style={styles.input}
          onChangeText={val => this.onChangeText('link', val)}
          placeholder="Registration Link"
          value={this.state.link}
        />
        <TextInput
          style={styles.input}
          onChangeText={val => this.onChangeText('description', val)}
          placeholder="Event Description"
          value={this.state.description}
        />
        <Button onPress={this.createTodo.bind(this) } title="Add Event"
        />
        {
          this.state.todos.map((todo, index) => (
            <ScrollView key={index} style={styles.item}>
              <Text style={styles.name}>{todo.name}</Text>
              <Text style={styles.name}>{todo.date}</Text>
              <Text style={styles.name}>{todo.organizer}</Text>
              <View style={styles.buttoncontainerP}>
                <View style={styles.buttoncontainerC}>
              <Button
                 title="Go to Details"
                 onPress={() => {
            /* 1. Navigate to the Details route with params */
                 this.props.navigation.navigate('Details', {
                  itemId: todo.id,
                   otherParam: 'anything you want here',
                  });
                 }}
               />
               </View>
               <View style={styles.buttoncontainerC}>
               <Button onPress={this.deleteTodo.bind(this) }
                  title="Delete"


                  />
                </View>
                </View>
            </ScrollView>
          ))
        }
        </ScrollView>
        );
        }
      }

此代码出现错误：

  [Unhandled promise rejection: TypeError: Array.prototype.map 
  callback must be a function]
  * [native code]:null in map
  * App.js:204:22 in _callee2$
  - node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
  - node_modules/regenerator-runtime/runtime.js:271:30 in invoke
  - node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
  - node_modules/regenerator-runtime/runtime.js:135:28 in invoke
  - node_modules/regenerator-runtime/runtime.js:170:17 in <unknown>
  - node_modules/promise/setimmediate/core.js:45:7 in tryCallTwo
  - node_modules/promise/setimmediate/core.js:200:23 in doResolve
  - node_modules/promise/setimmediate/core.js:66:12 in Promise
  - node_modules/regenerator-runtime/runtime.js:169:27 in 
  callInvokeWithMethodAndArg
  - node_modules/regenerator-runtime/runtime.js:192:38 in enqueue
  - node_modules/regenerator-runtime/runtime.js:216:8 in async
  * App.js:199:15 in _callee2