在 ReactJS 中获取 PHP 文件的回显

Question

我是 ReactJS 的新手，刚刚完成我的教程，现在我正在使用 React。我开始只是制作一个 PHP 文件回显“你好”，然后 React.js 获取该响应并将其显示在网站上，但它似乎根本不起作用。

我的PHP代码：

<?PHP
  echo "Hello!";
?>

我的React.js代码：

const [data, newData] = useState(null);
useEffect(() => {
  fetch(//MY .php file link, NOT API just a php file echoing hello)
    .then((response) => response.json())
    .then(newData);
  });
        
  return (
    <>
      <div>
        { data }
      </div>
    </>
  );

Answer 1

在 fetch 的第一个 .then() 中，当您尝试使用 json() 方法从响应中提取 JSON 内容时，您应该使用 .text() 方法，因为您从服务器返回一个简单的字符串，而不是 JSON 对象。返回此文本后，您可以在第二个 .then().

中更新状态

不要忘记在您的 useEffect 中包含一个依赖项数组，因为如果没有它，您总是会在它运行后触发另一个渲染。如果您添加一个空数组作为依赖项，它只会在页面加载时获取。

function App() {
  const [data, newData] = useState(null);

  useEffect(() => {
    fetch(URL)
      .then((response) => response.text())
      .then((response) => newData(response));
  }, []);

  return <div>{data ? data : 'No data yet...'}</div>;
}

在 ReactJS 中获取 PHP 文件的回显

Fetching the echo of a PHP file in ReactJS

javascript

php

fetch

reactjs

use-state