reactjs - Word Counter React - 显示词频
问题描述
嗨,我对 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;
解决方案
问题
问题是您没有迭代wordSelectionCount
渲染数据,因此将显示您的最新值。
您可以迭代wordSelectionCount
以呈现所有数据。但是,我有一个建议给你
建议
第一个建议是,使用功能组件和反应钩子。其次,使用对象的 [key-value] 对的强大功能来存储字数。
如果你想看看,我已经创建了一个代码框示例。您可以开始添加单词以查看单词计数器。
现有代码的解决方案
<span>{wordCounts}</span>
您应该对其进行迭代,而不是直接渲染。如:
this.state.wordSelectionCount && Object.keys(this.state.wordSelectionCount).map(word => (
<span>{word} - {this.state.wordSelectionCount[word]}</span>
)}
推荐阅读
- c# - asp.net core mvc中间件简单案例
- docker - ASP.NET Core + Docker -> 在本地网络上可用
- php - 发送数据到资源方法
- splunk - 如何巩固宏观结果
- postgresql - PostgreSQL & PgAdmin 设置会话变量来查询结果
- php - 变量数与参数数不匹配php
- javascript - 转换为 ObjectID 的值失败
- django - 无法在 django 中使用 modelForm 显示更新的模型
- ios - JSONSerialization.jsonObject 导致 swift 4.0 和 4.2 中的内存泄漏
- php - 如何组合两个数组并推送值?