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);
}

这只是一个简单的示例，您可以根据自己的需求进行调整。在实际项目中，您可能还需要处理身份验证、错误处理、加载状态等其他方面的问题。