在 ReactJS 中获取调用到 PHP 文件返回未定义
Posted
技术标签:
【中文标题】在 ReactJS 中获取调用到 PHP 文件返回未定义【英文标题】：Fetch call in ReactJS to PHP file returning undefined 【发布时间】：2019-09-02 14:18:21 【问题描述】：当我在 componentDidMount() 方法中运行 fetch 调用时，它会返回 undefined。当我在服务器上手动运行 php 文件时，它返回 JSON 没有问题，但调用本身就是返回 undefined。
componentDidMount()
fetch("backend.php").then(function (data)
console.log("Hello");
console.log(data);
)
我的控制台说：
App.js:60 Hello
App.js:61 undefined
但是，如果我在浏览器中导航到 backend.php，我会得到 p>
["ID":"0","Name":"Hulk","Publisher":"Marvel","Date":"2019-04-02","Number":"1","ID":"1","Name":"Hulk","Publisher":"Marvel","Date":"2019-04-02","Number":"2"]
这是我的 PHP 文件
$result_array = array();
/* Create connection */
$conn = new mysqli($host, $username, $password, $dbname);
/* Check connection */
if ($conn->connect_error)
die("Connection to database failed: " . $conn->connect_error);
/* SQL query to get results from database */
$sql = "SELECT * FROM Comics ";
$result = $conn->query($sql);
/* If there are results from database push to result array */
if ($result->num_rows > 0)
while($row = $result->fetch_assoc())
array_push($result_array, $row);
/* send a JSON encded array to client */
header('Content-Type: application/json');
echo json_encode($result_array);
$conn->close();
由于难以弄清楚这个问题，我添加了这个供大家查看。如果我使用.then(response => response.text()) 告诉它是文本，这就是返回的内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="theme-color" content="#000000" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="/manifest.json" />
<!--
Notice the use of in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable javascript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script src="/static/js/bundle.js"></script><script src="/static/js/0.chunk.js"></script><script src="/static/js/main.chunk.js"></script><script src="/main.c69debfe96d2803a0c36.hot-update.js"></script></body>
</html>
【问题讨论】：
在您的浏览器中打开网络选项卡并尝试再次调用，这将为您提供正在加载的资源列表（包括 backend.php），您可以查看您收到的服务器响应. 我在找什么？我看到 backend.php 是很多事情的发起者，但就是这样。 已经知道了 标题似乎都是空的@DanielG Chrome 浏览器。有趣的是，如果我添加 response.text() 它会将页面打印到控制台 【参考方案1】：您似乎正在使用 npm 来编译它，并且您在 npm 项目的 src 目录中有 PHP 文件。尝试将 PHP 文件移动到项目的根文件夹（包含 src、public 和 build 文件夹）并将其引用为 ../backend.php。
注意：如果你使用npm start，它不会工作，因为 npm 服务器不能运行 PHP。您需要使用 npm run build 编译它，然后使用支持 PHP 的 Web 服务器。
【讨论】：
我如何在服务器上而不是通过 npm 运行它npm run build【参考方案2】：
当使用 fetch 并使用带有此 fetch 的 Promise 时，您有一些事情可以像这样获得正确的 json：
fetch('backend.php')
.then(response => response.json())
.then(json =>
// Do something with your json
)
或者调试你可以做的响应
fetch('backend.php')
.then(response => response.text())
.then(text =>
console.log(text);
// do something else with the text
)
【讨论】：
当我运行它时，我得到： Unhandled Rejection (SyntaxError): Unexpected token 看起来你在那里得到了一些 HTML 响应。您可以检查“开发者工具”通常 F12，并检查“网络”选项卡。对于“backend.php”网络交互，您应该会看到响应。检查它是有效的 json。 它显示我的索引页面作为响应。从字面上看，就像我要求查看源代码一样的一堆 html。 对，有错误。您可能必须找到调用 backend.php 的正确方法 检查backend.php的路径是否正确。它必须与您触发 javascript 代码的级别相同。否则做这样的事情fetch('<right-path-to-your-script>/backend.php')...以上是关于在 ReactJS 中获取调用到 PHP 文件返回未定义的主要内容，如果未能解决你的问题，请参考以下文章
Fetch API 无法加载“.php”本地文件 - React JS + PHP