在 ReactJS 中获取 PHP 文件的回显

【问题标题】：Fetching the echo of a PHP file in ReactJS在 ReactJS 中获取 PHP 文件的回显
【发布时间】：2021-04-03 03:53:04
【问题描述】：

我对 ReactJS 完全陌生，刚刚完成了我的教程，现在我正在使用 React。我开始只是制作一个 PHP 文件 echo "Hello"，然后 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>
    </>
  );

【问题讨论】：

标签： javascript php reactjs fetch use-state

【解决方案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>;
}

【讨论】：