Word Counter React - 显示词频

Question

嗨，我对 React 相当陌生，目前正在尝试编写一个单词计数器。这个想法是，一旦您在文本框中键入内容，它就会显示所有单词的列表以及它们的使用频率（这将显示在显示 wordCounts 的 span 标签中）。我目前遇到的问题是，当我想要一个列表时，它只显示一个带有频率的单词。此外，老实说，我觉得可以通过完全不同的方式来实现，但我对 React 还很陌生，并且不断学习。

如果我需要分享更多信息或更多代码，请告诉我。

反应代码

import { Component } from "react";
import "./App.css";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      firstValue: "",
      numberOfCharacters: "",
      withoutWhiteSpace: "",
      numberOfWords: "",
      linesCount: "",
      wordSelectionCount: "",
    };
  }

  firstHandle = (event) => {
    var input = event.target.value;

    const text = document.getElementById("textarea").value;
    const linesCount = text.split("/\r|\r\n|\n/").length;

    const numberOfCharacters = input === "" ? 0 : input.split("").length;
    const withoutWhiteSpace =
      input === "" ? 0 : input.split("").filter((char) => char !== " ").length;
    const words =
      input === "" ? 0 : input.split(" ").filter((word) => word.trim()).length;
    const lines = input === "" ? 1 : input.split(/\n/g).length;

    this.setState({
      firstValue: input,
      numberOfCharacters: numberOfCharacters,
      withoutWhiteSpace: withoutWhiteSpace,
      numberOfWords: words,
      linesCount: lines,
      wordSelectionCount: "",
    });
  };

  // This function is responsible for the word counting

  wordCounter = (e) => {
    e.preventDefault();
    var keys = [];
    var counts = {};
    const input = this.state.firstValue
      .replace(/\W/g, " ")
      .replace(/[0-9]/g, " ")
      .split(" ")
      .filter((word) => word.trim());
    for (let i = 0; i < input.length; i++) {
      var word = input[i];
      if (counts[word] === undefined) {
        counts[word] = 1;
        keys.push(word);
      } else {
        counts[word] += 1;
        keys.push(word);
        // console.log(keys);
      }
      keys.sort();

      for (let i = 0; i < keys.length; i++) {
        var key = keys[i];
        var result = key + " - " + counts[key];
        console.log(result);
      }
      this.setState({
        wordSelectionCount: result,
      });
    }
  };

  render() {
    var numberOfCharacters = this.state.numberOfCharacters;
    var withoutWhiteSpace = this.state.withoutWhiteSpace;
    var words = this.state.numberOfWords;
    var lines = this.state.linesCount;
    var wordCounts = this.state.wordSelectionCount;
    console.log(wordCounts);

    return (
      <div className="App">
        <header className="App-header">
          <form>
            <h1>Character Counter</h1>
            <p>
              Characters <span>{numberOfCharacters}</span> Without White Space{" "}
              <span>{withoutWhiteSpace}</span> Words <span>{words}</span> Lines{" "}
              <span>{lines}</span>
            </p>
            <textarea
              id="textarea"
              type="text"
              placeholder="Please type some text..."
              value={this.firstValue}
              onChange={this.firstHandle}
            />
            <h1>Word Counting</h1>
            {/* This button calls the wordCounter Method which should display all the Word listings */}
            <button className="btn" onClick={this.wordCounter}>
              Words Count
            </button>
            <p>
              <span>{wordCounts}</span>
            </p>
          </form>
        </header>
      </div>
    );
  }
}

export default App;

Answer 1

问题

问题是您没有迭代

wordSelectionCount

来渲染数据，因此将显示您的最新值。

您可以迭代

wordSelectionCount

来渲染所有数据。不过，我有一个建议给你

建议

第一个建议是，使用功能组件和反应钩子。 其次，利用对象的[键值]对的力量来存储字数。

如果你想看看，我已经创建了一个 codesandbox 示例。您可以开始添加单词以查看单词计数器。

现有代码的解决方案

您应该迭代它，而不是直接渲染

<span>{wordCounts}</span>

。如：

this.state.wordSelectionCount && Object.keys(this.state.wordSelectionCount).map(word => (
 <span>{word} - {this.state.wordSelectionCount[word]}</span>
)}

Answer 2

不确定您遇到什么问题