由於某種原因，我的反應組件沒有呈現。 控制台正在運行我的代碼，終端沒有錯誤

Question

我正在構建一個 React 翻譯器應用程序。 一切看起來都很好，但是當我保存文件或刷新頁面時頁面沒有呈現。 在控制台中，我可以看到正在獲取的語言列表，並且已經成功獲取。 但是網頁上沒有任何渲染。

• 確保 JSX 元素包裹在父 div 中
• 確保文件在父組件中被正確調用
• 在終端和瀏覽器的開發工具頁面中檢查了錯誤，但沒有。

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");
        setLanguagesList(response.data.languages);
      })
      .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.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);

    const handleLanguageChange = (event) => {
        setSelectedLanguage(event.target.value);
      };
    
      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>
      );
    }
}

Answer 1

你的頁面結構錯誤。 我在下面分享了你可以改變這個。

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");
        setLanguagesList(response.data.languages);
      })
      .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.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);
  };

  const handleLanguageChange = (event) => {
    setSelectedLanguage(event.target.value);
  };

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