How to integrate i18n translation resource saved as JSONB data and fetched with REST API on React?

解决方案步骤

1. 设计数据模型和API

首先，您需要设计后端的数据模型，以及相应的REST API。这些API将处理JSONB数据的保存与查询，并且提供接口用来访问和更新i18n资源。

• 数据模型: 假设您使用的是一个支持JSONB的数据库（如PostgreSQL），您可以创建一个模型，该模型包含一个JSONB字段专门用来存储多语言相关数据。
• REST API: 设计REST API来接受JSONB数据并存储在数据库中。同时，设计API以便能够查询和更新i18n翻译资源。

2. 集成数据库和API到后端应用

使用您选择的后端技术（如Node.js, Python等），集成数据库操作。确保API能够正确处理JSONB格式的数据，并提供必要的端点来管理i18n资源。

3. 使用React来构建前端

在React应用中，您需要构建用户界面来与这些API交互。

• 数据保存: 创建表单或界面，允许用户输入数据，然后通过API发送JSONB格式的数据到后端存储。
• 国际化: 使用如 react-i18next之类的库来集成i18n。配置这个库从您的REST API获取翻译资源。

4. 使用Axios或Fetch来与REST API通信

在React中，您可以使用 axios或 fetch来处理与REST API的交互。这包括发送数据以及请求翻译资源。

• 发送数据: 当用户提交数据时，使用 axios.post或者 fetch的POST方法将数据发送到您的API。
• 获取翻译资源: 在应用启动或用户更改语言时，从API获取最新的翻译资源。

5. 测试和优化

在集成全部组件后，进行彻底的测试来确保所有部分都能正常工作。检查数据是否能正确保存为JSONB，以及翻译是否根据用户的语言偏好正确加载。

示例

假设您有一个用于收集用户反馈的表单，您希望这些数据以JSONB的格式保存，并且表单支持多语言。

后端 (Node.js + Express + PostgreSQL):

javascript
const express = require('express');
const bodyParser = require('body-parser');
const { Pool } = require('pg');

const pool = new Pool({
  connectionString: '您的数据库连接字符串'
});

const app = express();
app.use(bodyParser.json());

app.post('/api/feedback', async (req, res) => {
  const { feedback, language } = req.body;
  const query = 'INSERT INTO feedbacks(data) VALUES($1) RETURNING *';
  const values = [{ feedback, language }];
  
  try {
    const { rows } = await pool.query(query, [values]);
    res.status(201).json(rows[0]);
  } catch (err) {
    res.status(500).json({ error: 'Internal Server Error' });
  }
});

app.listen(3000, () => console.log('Server running on port 3000'));

前端 (React + Axios):

javascript
import React, { useState } from 'react';
import axios from 'axios';
import { useTranslation } from 'react-i18next';

function FeedbackForm() {
  const { t, i18n } = useTranslation();
  const [feedback, setFeedback] = useState('');

  const handleFeedbackChange = (event) => {
    setFeedback(event.target.value);
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    try {
      const response = await axios.post('/api/feedback', { feedback, language: i18n.language });
      console.log('Saved:', response.data);
    } catch (error) {
      console.error('Error saving feedback:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        {t('feedbackLabel')}
        <textarea value={feedback} onChange={handleFeedbackChange} />
      </label>
      <button type="submit">{t('submit')}</button>
    </form>
  );
}

export default FeedbackForm;

在这个例子中，我们设计了一个简单的后端来接收和存储JSONB数据，和一个React前端表单来提交这些数据同时支持多语言。