php - 使用 php 从 mysql 表中获取数据并做出本机反应

Question

我想显示 MySQL 表中使用 PHP 处理并做出本机反应但不提供响应且不显示任何错误消息的数据。如果我用浏览器运行的 PHP 脚本会如下所示：

[
    {"group":"1","name":"Soy Souce A"},
    {"group":"2","name":"Soy Souce B"},
    {"group":"3","name":"Chili Tomato Souce"},
    {"group":"4","name":"Vinegar"},
    {"group":"5","name":"Syrup"}
]

这是屏幕截图显示：

我的问题 ：

1. 为什么数据不能显示
2. 如截屏一样，为什么会出现3个标题，标题2是导航，如何消除标题1和3请帮助我克服它，谢谢

这是反应原生脚本

import React, { Component } from 'react';
import DatePicker from 'react-native-datepicker'

import { View, Text, TouchableOpacity, FlatList } from 'react-native';
import { createStackNavigator } from 'react-navigation-stack'
import { createAppContainer } from 'react-navigation'
import Icon from 'react-native-vector-icons/MaterialIcons';

import { Item, } from 'native-base';

class DataSearch extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            date:"",
            isLoading: false
        }
    }

    componentDidMount() {
        var that = this;
        var date = new Date().getDate();
        var month = new Date().getMonth() + 1;
        var year = new Date().getFullYear();
        that.setState({
            date: date + '-' + month + '-' + year,
        });
    }

    DataShowProcess = () =>{
        const { date }  = this.state ;
        this.setState({
            dataSource: [], 
            isLoading: true
        });
        fetch('https://example.com/item_group.php', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                dateSearch: date,
            })
        })
        .then((response) => response.json())
        .then((responseJson) => {
            this.setState({
                isLoading: false,
                dataSource: responseJson
            });
            this.props.navigation.navigate('Second', this.state.dataSource);
        })
        .catch((error) => {
            console.error(error);
        });
    }   

    render(){
        return (
            <View>
                <DatePicker
                    style={{width: 200}}
                    date={this.state.date}
                    mode="date"
                    placeholder="select date"
                    format="DD-MM-YYYY"
                    confirmBtnText="Confirm"
                    cancelBtnText="Cancel"
                    customStyles={{
                        dateIcon: {
                            position: 'absolute',
                            left: 200,
                            top: 0,
                            marginLeft: 0
                        },
                        dateInput: {
                            marginLeft: 100
                        },
                    }}
                    onDateChange={(date) => {this.setState({date: date})}}
                />
                <TouchableOpacity 
                    style={{ alignItems: 'center'}} 
                    onPress={this.DataShowProcess} 
                >
                    <Icon name='search' size={35} color='black'/>
                </TouchableOpacity>   
            </View>
        )
    }
}

class DataShow extends React.Component {
    render(){
    const { navigation } = this.props;
    return (
      <View style={{flex: 1, paddingTop:20}}>
        <FlatList
          data={this.state.responseJson}
          renderItem={({item}) => <Text>{item.group}, {item.name}</Text>}
          keyExtractor={({id}, index) => id}
        />
      </View>
    )};
}

const RootStack = createStackNavigator({
  First: DataSearch,
  Second: DataShow,
});

export default createAppContainer(RootStack);

标签： phpmysqlreactjsreact-native