React翻译应用组件无法渲染，请求正常但页面无内容求助

核心问题 #

组件无法渲染的根本原因是组件的JSX返回语句被错误嵌套在translateText函数内部，导致组件本身没有返回任何内容，所以页面空白。此外还有一处数据处理错误需要修正：微软翻译API返回的语言列表是对象结构，而非数组，直接map会报错。

具体修复步骤 #

1. 修正函数闭合与代码结构

   • 将translateText函数正确闭合，把handleLanguageChange和组件的return语句移到translateText函数外部，作为组件顶层代码。

2. 修正语言列表的数据处理

   • 微软翻译API返回的response.data.languages是一个以语言代码为键的对象，需要用Object.values()将其转换为数组后再进行map遍历。

修复后的完整代码 #

import React, { useState, useEffect } from "react";
import { Form, TextArea, Button, Icon } from "semantic-ui-react";
import axios from "axios";

const apiKey = "c9200cf48dbc4351819cff23bea6bda0";
const baseUrl = "https://api.cognitive.microsofttranslator.com/";

export default function Translate() {
  const [text, setText] = useState("");
  const [resultText, setResultText] = useState("");
  const [languagesList, setLanguagesList] = useState([{ code: "es", name: "Spanish" }]);
  const [selectedLanguage, setSelectedLanguage] = useState("");
  const [detectedLanguage, setDetectedLanguage] = useState("");
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

  // Get Languages
  useEffect(() => {
    console.log("fetching languages list...");
    axios
      .get(`${baseUrl}languages?api-version=3.0&scope=translation`, {
        headers: {
          "Ocp-Apim-Subscription-Key": apiKey,
        },
      })
      .then((response) => {
        console.log("Language list fetched successfully");
        // 将API返回的对象转换为数组
        const langArray = Object.values(response.data.languages);
        setLanguagesList(langArray);
      })
      .catch((error) => {
        setError(error);
        console.error(error)
      });
  }, []);

  // Detect Language
  const getLanguageSource = async () => {
    setLoading(true);
    setError(null);
    try {
      const response = await axios.post(
        `${baseUrl}detect?api-version=3.0`,
        {
          text: text,
        },
        {
          headers: {
            "Ocp-Apim-Subscription-Key": apiKey,
            "Content-type": "application/json",
          },
        }
      );
      setDetectedLanguage(response.data[0].language); // 修正：detect API返回数组，需取第一个元素的language字段
    } catch (error) {
      setError(error);
      console.error(error)
    }
    setLoading(false);
  };

  // Translate Text
  const translateText = async () => {
    setLoading(true);
    setError(null);
    try {
      const response = await axios.post(
        `${baseUrl}translate?api-version=3.0`,
        [
          {
            text: text,
          },
        ],
        {
          params: {
            "to": selectedLanguage,
          },
          headers: {
            "Ocp-Apim-Subscription-Key": apiKey,
            "Content-type": "application/json",
          },
        }
      );
      setResultText(response.data[0].translations[0].text);
    } catch (error) {
      setError(error);
      console.error(error)
    }
    setLoading(false);
  };

  // 将handleLanguageChange移到组件顶层
  const handleLanguageChange = (event) => {
    setSelectedLanguage(event.target.value);
  };

  // 组件return语句移到顶层，不再嵌套在函数内
  return (
    <div>
      <div>
        <div className="app-header">
          <h2 className="header"> Foreign Language Interpreter</h2>
        </div>

        <div className="app-body">
          <Form>
            <Form.Field
              control={TextArea}
              label=""
              placeholder="Type text to translate..."
              onChange={(e) => setText(e.target.value)}
              onBlur={getLanguageSource}
            />

            <select
              className="language-select"
              onChange={handleLanguageChange}
              value={selectedLanguage}
              name="selectedLanguage"
            >
              <option value="">Select Language</option>
              {languagesList
                ? languagesList.map((language) => {
                    return (
                      <option key={language.code} value={language.code}>
                        {language.name}
                      </option>
                    );
                  })
                : null}
            </select>
            <Button 
              loading={loading} 
              onClick={translateText} 
              disabled={!text || !selectedLanguage}
            >
              Translate
            </Button>
            {error && <p>An error occurred: {error.message}</p>}
            <p>{resultText}</p>
          </Form>
        </div>
      </div>
    </div>
  );
}

额外修正说明 #

• 补充了detect API的返回处理：该接口返回数组，需取第一个元素的language字段。
• 修正了语言列表的转换逻辑，确保下拉选项能正确渲染。

内容的提问来源于stack exchange，提问作者Christian Lim