Блог

У меня есть этот выходной компонент, который должен отображаться, когда он получает реквизит от родительского компонента.

Как я могу это сделать? Прямо сейчас он отображается, когда я нажимаю кнопку, но без вызова функции 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;

  

Вероятная проблема заключается в том, что вы не вызываете функцию 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>
  )
  

;

Для вызова 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;
  

Вам необходимо переместить функциональность перевода либо в функцию «onChange», либо в функцию «onBlur» (если вы хотите, чтобы текст был переведен после того, как пользователь нажмет кнопку). Также функции, которые вы передаете onChange и onBlur, должны управлять асинхронным характером ваших функций перевода.

Вы можете использовать метод useEffect, который будет выполняться каждый раз при изменении реквизита или визуализации компонента.

 useEffect(()=>{
getTranslate();

 }, [props])