Question

我有这个Output组件，当它从父组件获取道具时应该呈现。

我该怎么做？现在，当我单击一个按钮但没有调用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;

Answer 1

可能的问题是您没有调用getTranslate函数，看起来应该是getTranslate（）;。另外，一旦接收到数据，您还需要更新状态。.请参阅我已放置注释以指导解决方案... getTranslate没有返回任何值，并且您调用它的位置不合适...

const getTranslate = () => {
    getUrl(props.language, props.text);
    const axios = require("axios");
    axios.get(function (respone) {
      console.log("Here comes response from api call: ", respone);
/// update the variable /state/ prop that you want to bind
      return respone.contents.translated;
    });
  };

然后将值绑定到模板中

return (
    <div>
      <textarea placeholder="Translated..." value={ the value to bind from state/prop}></textarea>
    </div>
  )

;

Answer 2

要调用getTranslate（），可以使用挂钩生命周期方法useEffect（）。并且可以将此函数返回的值设置为某种状态，并将设置的状态绑定到文本区域值。

import React, { useState, useEffect } from "react";

import Axios from "axios";

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

  useEffect(()=>{
    getTranslate();

  })

  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 = () => {
    console.log("From get translate")
    getUrl(props.language, props.text);
    Axios.get(function (respone) {
      console.log("Here comes response from api call: ", respone);
     setOutput(respone.contents.translated);
    });

  };

  return (
    <div>
      <textarea placeholder="Translated..." value={output} onChange={()=>console.log("Testing")}></textarea>
    </div>
  );
};

export default Output;

Answer 3

您需要将翻译功能移至“ onChange”功能或“ onBlur”功能（如果要在用户单击后翻译文本）。另外，您传递给onChange和onBlur的函数也应管理翻译功能的异步性质。

Answer 4

您可以使用useEffect方法，该方法将在每次更改道具或渲染组件时运行。

useEffect(()=>{
getTranslate();

 }, [props])

道具更改时渲染组件，否则未显示

4 个答案: