PHP DPO Json 未在 React Native 中显示

Question

我正在尝试学习 React Native，并从在简单的应用程序视图中简单获取一些数据开始。我的服务器上有一个 php 文件，其中 return Json 中的一些数据（它是一个包含 3 个 Objs 的数组）

如果我回显 php 文件，我会得到一个有效的 Json 格式，并且可以在浏览器上看到所有数据。

但是如果我尝试通过 React Native 获取数据，我会得到一个空白页面。

这是我的 PHP 文件

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: *");
header("Content-Type: application/json");

try {
   $dbh = new PDO('mysql:host=foo', $user, $pass,
   [PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"]
 );
 $query = "SELECT * FROM wochenplan_aufräumen";

 $stmt = $dbh->prepare($query);
 $result = array();
 $stmt->execute();
 $result = $stmt->fetchAll(PDO::FETCH_ASSOC);

     echo json_encode($result);
     return json_encode($result);


} catch (PDOException $e) {
  echo "Error!: " . $e->getMessage() . "<br/>";
  die();
}
?>

这是我的这是我的 React 本机组件

const App = () => {
  const [isLoading, setLoading] = useState(true);
    const [data, setData] = useState([]);

    useEffect(() => {
      fetch('foo.php', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/x-www-form-urlencoded'
        }

      })
        .then((response) => response.json)
        .then((json) => setData(json.id))
        .catch((error) => console.error(error))
        .finally(() => setLoading(false));
    }, []);

    console.log(data);

    return (

      <View style={{ flex: 1, padding: 24 }}>

        {isLoading ? <ActivityIndicator/> : (
          <FlatList
            data={data}
            keyExtractor={({ id }, index) => id}
            renderItem={({ item }) => (
              <Text>{item.crdate}, {item.crdate}</Text>
            )}
          />
        )}
      </View>
    );
}

非常奇怪的是console.log(data);给我一个空数组，另外 2 个未定义

Answer 1

使用 fetch，您可以通过调用响应的 json() 方法来解析对 json 的响应。

fetch (/* ... */)
.then(response => response.json()) // here
.then(json => {})

Answer 2

我认为您的 json-响应中有一些字符与 json-格式不兼容。检查前后是否有换行符或空格。

如果您不使用函数或 class-方法，请删除 php 代码中的 return json_encode(...) 行。

在学习 react-native 的同时享受乐趣 ;)

PHP DPO Json 未在 React Native 中显示

PHP PDO Json doesnt show in React Native

php

json

pdo

react-native