Question

更新：滚动查看我的解决方案，可以改进吗？

所以我遇到了这个问题，我正在构建一个单词翻译器，将英语翻译为“ doggo”，我已经在香草JS中构建了它，但我想这样做。

我的对象来自这样的Firebase

dictionary = [
    0: {
        name: "paws",
        paws: ["stumps", "toes beans"] 
    }
    1: {
        name: "fur",
        fur: ["floof"] 
    }
    2: {
        name: "what"
        what: ["wut"]
    }
]

然后我将其转换为这种格式以便于访问：

dictionary = {
    what : ["wut"],
    paws : ["stumps", "toe beans"],
    fur : ["floof"]
}

然后，我有两个文本区域输入，其中一个接受输入，我希望另一个输入相应的翻译。目前，我只是将其记录到控制台。

这可以很好地输出相应单词的数组，接下来我有另一个变量，我称之为“ levelOfDerp”，它基本上是一个介于0到2之间的数字（默认设置为0），我可以将其扔到console.log（）如下所示，以对应于数组中获取输出的单词。

dictionary.map(item => {
  console.log(item[evt.target.value][levelOfDerp]);
});

执行此操作时，出现“ TypeError：无法读取未定义的属性'0'”。我试图弄清楚如何克服此错误并在用户键入时实时执行翻译。

这是来自vanilla js的代码，该代码可对click事件和所有事件立即执行翻译。不是我要在这里实现的目的，而是为了清楚起见添加了它。

function convertText(event) {
    event.preventDefault();
    let text = inputForm.value.toLowerCase().trim();
    let array = text.split(/,?\s+/);
    array.forEach(word => {
      if (dictionary[word] === undefined) {
        outputForm.innerHTML += `${word} `;
        noTranslationArr.push(word);
      } else {
        let output = dictionary[word][levelOfDerp];
        if (output === undefined) {
          output = dictionary[word][1];
          if (output === undefined) {
            output = dictionary[word][0];
          }
        }
        outputForm.innerHTML += `${output} `;
        hashtagArr.push(output);
      }
    });
    addData(noTranslationArr);
  }

这也是指向香草js中的翻译器的链接，以使您更好地了解项目https://darrencarlin.github.io/DoggoSpk/

解决方案，但可能会更好。

我找到了一个解决方案，但我只是觉得此代码首先与使用react的原因背道而驰。我主要担心的是，我声明了要在函数内的数组内部存储字符串的变量（每次击键时））（我在React中还没有真正做到），我觉得这违反了最佳实践？

  translate = evt => {

    // Converting the firebase object 
    const dict = this.state.dictionary;
    let dictCopy = Object.assign(
      {},
      ...dict.map(item => ({ [item["name"]]: item }))
    );

    let text = evt.target.value.toLowerCase().trim();
    let textArr = text.split(/,?\s+/);
    let translation = "";

    textArr.forEach(word => {
      if (dictCopy[word] === undefined) {
        translation += `${word} `;
      } else {
        translation += dictCopy[word][word][this.state.derpLvl];
      }
    });
    this.setState({ translation });
  };

Answer 1

levelOfDerp未定义，请尝试将'levelOfDerp'用作带引号的字符串。

   let output = dictionary[word]['levelOfDerp' ];

Answer 2

发生问题是因为setState()是异步的，所以在执行它时，evt.target.value引用可能不再存在。如您所述，解决方案是将该引用存储到变量中。

也许可以考虑编写另一个函数来处理对象转换并将其存储在变量中，因为按原样，您每次用户输入内容时都在进行转换。

React中的自定义单词翻译器

2 个答案: