React.js如何與后端交互

React.js 是一個前端庫，它本身不直接與后端進行交互。但是，您可以通過使用 AJAX 技術（Asynchronous JavaScript and XML）或者現代的 Fetch API 在 React 應用程序中與后端服務器進行通信。

以下是使用 Fetch API 和 React.js 與后端交互的一個簡單示例：

1. 首先，在 React 組件中創建一個函數，用于向后端發送請求并獲取數據：

function fetchData() {
  fetch('https://your-backend-api-url.com/data')
    .then(response => response.json())
    .then(data => setData(data))
    .catch(error => console.error('Error fetching data:', error));
}

在這個示例中，我們使用 fetch() 函數向指定的后端 API URL 發送 GET 請求。然后，我們將響應轉換為 JSON 格式，并將其存儲在組件的狀態中。

2. 在 React 組件的 componentDidMount() 生命周期方法中調用 fetchData() 函數，以便在組件掛載時自動獲取數據：

class MyComponent extends React.Component {
  state = {
    data: null,
  };

  componentDidMount() {
    fetchData();
  }

  // ...
}

3. 如果需要向后端發送數據（例如，提交表單），可以創建一個函數來處理 POST 請求：

function postData(formData) {
  fetch('https://your-backend-api-url.com/data', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(formData),
  })
    .then(response => response.json())
    .then(data => setData(data))
    .catch(error => console.error('Error posting data:', error));
}

在這個示例中，我們使用 fetch() 函數向指定的后端 API URL 發送 POST 請求，并將表單數據作為 JSON 字符串傳遞。然后，我們將響應轉換為 JSON 格式，并將其存儲在組件的狀態中。

4. 在需要提交數據的地方調用 postData() 函數，例如在表單的 onSubmit 事件處理程序中：

function handleFormSubmit(event) {
  event.preventDefault();
  const formData = new FormData(event.target);
  postData(formData);
}

這只是一個簡單的示例，您可以根據自己的需求進行調整。在實際項目中，您可能還需要處理身份驗證、錯誤處理、加載狀態等其他方面的問題。