React 应用程序构建成功，但在打开的端口上未打印结果

Question

我开发了一个简单的 React 应用程序，在尝试在本地运行它时遇到了问题。运行 npm start 后，构建过程成功完成，服务器应该在 http://localhost:3000 上提供服务。然而，当我访问这个URL时，并没有显示预期的结果。就好像应用程序未正确呈现或内容未正确提供一样。

这是我运行 npm start 后收到的输出：

构建成功并提供服务！

• 本地：http://localhost:3000
• 网络：http://192.168.100.2:3000

我已经仔细检查了我的代码，一切似乎都按顺序进行。以前有其他人遇到过类似的问题吗？任何有关如何调试和解决此问题的见解或建议将不胜感激。

这是应用程序文件中的代码

import React, { useState } from 'react';
import BloodPressureTable from './components/BloodPressureTable';
import Chart from './components/Chart';
import WHOIndicatorScores from './components/WHOIndicatorScores';

function App() {
  const [bloodPressureData, setBloodPressureData] = useState([]);
  // Function to add a new entry to the data
  const addDataEntry = (newEntry) => {
    setBloodPressureData([...bloodPressureData, newEntry]);
  };


  // State to manage form inputs
  const [newEntry, setNewEntry] = useState({
    time: '',
    date: '',
    amPm: '',
    systolic: '',
    diastolic: '',
    heartRate: '',
    comments: '',
  });

  // Function to handle form submission
  const handleSubmit = (e) => {
    e.preventDefault();
    addDataEntry(newEntry);
    // Reset form fields after submission
    setNewEntry({
      time: '',
      date: '',
      amPm: '',
      systolic: '',
      diastolic: '',
      heartRate: '',
      comments: '',
    });
  };

  // Function to handle input changes
  const handleChange = (e) => {
    const { name, value } = e.target;
    setNewEntry({
      ...newEntry,
      [name]: value,
    });
  };

  return (
    <div className="App">
      <h1>Blood Pressure Tracker</h1>
      <form onSubmit={handleSubmit}>
        <label>
          Time:
          <input type="text" name="time" value={newEntry.time} onChange={handleChange} />
        </label>
        {/* Add other input fields for date, amPm, systolic, diastolic, heartRate, comments */}
        {/* Make sure to add appropriate labels and onChange handlers */}
        <button type="submit">Add Entry</button>
      </form>
      <BloodPressureTable data={bloodPressureData} />
      <Chart data={bloodPressureData} />
      <WHOIndicatorScores />
    </div>
  );
}

export default App;

Answer 1

当您打开 http://localhost:3000 时，浏览器上会显示什么？ 您说“未显示预期结果。就好像应用程序未正确渲染或内容未正确提供一样。”。 这是根本没有提供服务还是内容正在显示但未按您的预期呈现？