javascript - 当 props 改变时渲染组件，否则不显示

问题描述

我有这个输出组件，当它从父组件获取道具时应该渲染它。

我怎样才能做到这一点？现在，当我单击一个按钮但没有调用 getTranslate 函数时，它会呈现。在调试器中，我可以看到该组件具有所需的道具，它只是不运行我的 getTranslate 函数

import React, { useState } from "react";

import Axios from "axios";

const Output = (props) => {
  const [output, setOutput] = useState(null);
  const [url, setUrl] = useState(null);

  const getUrl = (language, text) => {
    console.log("GetURL ran with: ", language, text);
    let url = "";
    switch (language) {
      case "yoda":
        url =
          " https://api.funtranslations.com/translate/yoda.json?text=" + text;
        break;

      case "valyrian":
        url =
          "https://api.funtranslations.com/translate/valyrian.json?text=" +
          text;
        break;

      case "sith":
        url =
          "https://api.funtranslations.com/translate/sith.json?text=" + text;
        break;

      case "shakespeare":
        url =
          "https://api.funtranslations.com/translate/shakespeare.json?text=" +
          text;
        break;

      case "pirate":
        url =
          "https://api.funtranslations.com/translate/pirate.json?text=" + text;
        break;

      case "minion":
        url =
          "https://api.funtranslations.com/translate/minion.json?text=" + text;
        break;

      case "lolcat":
        url =
          "https://api.funtranslations.com/translate/lolcat.json?text=" + text;
        break;

      case "klingon":
        url =
          "https://api.funtranslations.com/translate/klingon.json?text=" + text;
        break;

      case "hacker":
        url =
          "https://api.funtranslations.com/translate/hacker.json?text=" + text;
        break;

      case "dothraki":
        url =
          "https://api.funtranslations.com/translate/dothraki.json?text=" +
          text;
        break;

      default:
        break;
    }

    setUrl(url);
  };

  const getTranslate = () => {
    getUrl(props.language, props.text);
    const axios = require("axios");
    axios.get(function (respone) {
      console.log("Here comes response from api call: ", respone);
      return respone.contents.translated;
    });
  };

  return (
    <div>
      <textarea placeholder="Translated..." value={{ getTranslate }}></textarea>
    </div>
  );
};

export default Output;

标签： javascriptreactjs

javascript - 当 props 改变时渲染组件，否则不显示

问题描述

解决方案

推荐阅读