删除挂钩,自动删除数据库中的所有条目

时间:2020-03-18 12:48:58

标签: javascript reactjs react-native

我创建了一个删除钩子来分别删除屏幕上的某些数据,但是每次加载该钩子时,它都会删除页面上的所有条目。我试图能够单击一个图标并删除一个项目。我正在通过道具传递商品的ID,然后调用我的delete函数,但不是等待用户输入,钩子会删除数据库中的所有内容。任何帮助表示赞赏。

挂钩

import { useContext } from 'react';
import { Context as CertificationContext } from '../context/CertificationContext';
import { Context as CertificateInfoContext } from '../context/CertificateInfoContext';

export default () => {
  const { deleteCertification } = useContext(CertificationContext);
  const {
    state: { certificationId }
  } = useContext(CertificateInfoContext);
  console.log('Delete' + certificationId);
  const removeCertification = async id => {
    await deleteCertification(id);
  };

  return removeCertification;
};

组件

import { View, Text, StyleSheet } from 'react-native';
import { Button } from 'react-native-elements';
import Icon from 'react-native-vector-icons/Feather';
import { navigate } from '../navigationRef';
import useDeleteCertification from '../hooks/useDeleteCertification';

const Certifications = ({ title, month, description, id }) => {
  const removeCertification = useDeleteCertification();
  return (
    <View style={styles.mainContainer}>
      <View style={styles.firstContainer}>
        <Text style={styles.monthText}>{month}</Text>
        <Text style={styles.dayText}>FRI</Text>
      </View>
      <View style={styles.secondContainer}>
        <Text style={styles.title}>{title}</Text>
        <Text style={styles.subtitle}>{description}</Text>
        <View style={styles.buttonView}>
          <Button
            icon={<Icon name='trash-2' color='grey' size={15} />}
            type='clear'
            onPress={removeCertification(id)}
          />
          <Button
            icon={<Icon name='share' color='grey' size={15} />}
            type='clear'
            onPress={() => {
              console.log('Share Button');
            }}
          />
          <Button
            icon={<Icon name='edit' color='grey' size={15} />}
            type='clear'
            onPress={() => {
              navigate('EditCertification', { id });
            }}
          />
        </View>
      </View>
    </View>
  );
};

1 个答案:

答案 0 :(得分:1)

onPress道具中使用箭头功能,如下所示:

<Button
  icon={<Icon name='trash-2' color='grey' size={15} />}
  type='clear'
  onPress={() => removeCertification(id)}
/>

现在您传递的是函数而不是函数的结果,因此它不会在渲染时触发