如何使用 react native 和 php 从数据库中删除特定数据

Question

我是 react native 的初学者。在我的 react native 项目中，我有这个前端。

在这里，通过在 PHP 文件中创建 JSON 对象，从数据库中检索所有这些 CIS、PST 和所有其他数据。它们如图所示列出，我为数据库表的每个数据添加了一个删除按钮，如您在照片中看到的那样。但是我还不能向删除按钮添加功能，因为我无法为按钮指定数据。我想要的是，如果我点击 CIS 前面的删除按钮，只删除 CIS 行。如果我单击 PST 前面的删除按钮，则仅删除 PST 行。如何将数据指定给按钮并将其删除。

这是我的反应原生代码。

import React, { Component } from 'react';
import { AppRegistry, Text, AsyncStorage, StyleSheet, TextInput, View, Alert, Button, FlatList, TouchableOpacity } from 'react-native';

class MainProject extends Component {

constructor(props) {
    super(props)
    this.state = {
        name: ''
    };
    this.persistData = this.persistData.bind(this);
}

state = {
    data: []
};

persistData() {
    let name = this.state.name
    AsyncStorage.setItem('name', name).done();
    this.setState({ name: name, persistedName: name })
}

check() {
    AsyncStorage.getItem('name').then((name) => {
        this.setState({ name: name, persistedName: name })
    })
}

componentWillMount() {
    this.check();
    //this.fetchData();
}

fetchData = async () => {
    const response = await fetch('http:/192.168.182.131/test/select.php');
    const json = await response.json();
    this.setState({ data: json.results });
};

removeData = async () => {
    const response = await fetch('http:/192.168.182.131/test/delete.php');
    const json = await response.json();
    this.setState({ data: json.results });
};

InsertDataToServer = () => {
    const { name } = this.state;

    fetch('http:/192.168.182.131/test/submit_user_info.php', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({

            name: name

        })

    }).then((response) => response.json())
        .then((responseJson) => {
            // Showing response message coming from the server after inserting records.
            Alert.alert(responseJson);
        }).catch((error) => {
            console.error(error);
        });
}

render() {
    return (
        <View style={styles.MainContainer}>
            <TextInput
                // Adding hint in Text Input using Place holder.
                placeholder="Enter Name"
                onChangeText={name => this.setState({ name })}
                // Making the Under line Transparent.
                underlineColorAndroid='transparent'
                style={styles.TextInputStyleClass}
            />
            <Button title="SUBMIT" onPress={this.InsertDataToServer} color="#2196F3" />
            <Button title="VIEW ALL" onPress={this.fetchData} color="green" style={styles.ViewAll} />
            <View>
                <Text>STATE:</Text>
                <Text>Name: {this.state.name}</Text>
            </View>
            <View style={styles.container}>
                <FlatList
                    data={this.state.data}
                    keyExtractor={(x, i) => i}
                    renderItem={({ item }) =>
                        <View>
                            <View>
                                <Text>
                                    {`${item.name}`}
                                </Text>
                            </View>
                            <View>
                                <TouchableOpacity onPress={this.removeData}>
                                    <Text style={styles.button}>
                                        DELETE
                                    </Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                    }
                />
            </View>
        </View>
    );
  }
}

const styles = StyleSheet.create({

MainContainer: {

    justifyContent: 'center',
    flex: 1,
    margin: 10
},

TextInputStyleClass: {

    textAlign: 'center',
    marginBottom: 7,
    height: 40,
    borderWidth: 1,
    // Set border Hex Color Code Here.
    borderColor: '#FF5722',
},

container: {
    marginTop: 15,
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
},

ViewAll: {
    marginTop: 50
},

button: {
    borderColor: 'red',
    backgroundColor: 'red',
    width: 60,
    textAlign: 'center',
    borderRadius: 10,
    color: 'white'
  }

});

AppRegistry.registerComponent('albums', () => MainProject);

这是我使用数据库数据创建 JSON 对象的 PHP 代码。

<?php
include 'DBConfig.php';

$con = mysqli_connect($HostName, $HostUser, $HostPass, $DatabaseName);

$query = "SELECT * FROM Department ORDER BY id ASC"; 
$res = mysqli_query($con,$query) or die("Query Not Executed " . mysqli_error($con));

$data = array(); 
while($rows = mysqli_fetch_assoc($res)) {
    $data[] = $rows;
}

$write = json_encode(array('results' => $data));
echo $write;

mysqli_close($con);
?>

Answer 1

您需要将标识符传递给 PHP。我建议您为此使用您的 id。这意味着，你必须将你的 id 发送给客户端，如果你按下删除，你明确告诉服务器删除这个 id。

你的 removeData 函数里面会有类似的东西：

fetch('http://192.168.182.131/test/delete.php', {
    method: 'POST',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        id: id
    })
})

这不是最好的解决方案，但应该可以。如果你有时间，我也建议你看看CRUD。