我一直试图渲染大多数频率的单词。我已经完成了获取API。要使用总计数来渲染单词。我在render()
中也有setState单词和映射的单词数组。我被期待的单词有重要性。我只得到1 1 1 1 1 1 1 1 1 1 1 2 1
的数字。在表数据中。
import React, { Component } from "react";
import { Grid, Row, Col, Table } from "react-bootstrap";
import axios from "axios";
class About extends Component {
state = {
counts: [],
posts: [],
words: []
};
componentDidMount() {
axios({
url:
"https://cors-anywhere.herokuapp.com/http://terriblytinytales.com/test.txt",
responseType: "text"
})
.then(res => {
const posts = res.data;
const newPosts = posts.split(/[0-9]+\./).map(post => post.split("?"));
// console.log(newPosts);
this.setState({
posts: newPosts
});
return res;
})
.then(res => {
const texts = res.data;
let words = texts.replace(/[.]/g, "").split(/\s/);
let freqMap = [];
words.map(w => {
if (!freqMap[w]) {
freqMap[w] = 0;
}
freqMap[w] += 1;
console.table(freqMap);
return freqMap;
});
this.setState({
words: freqMap
});
})
.catch(error => {
console.log(error);
});
}
render() {
return (
<Grid>
<Row>
<Col xs={12} sm={6} md={6}>
<h1>fetched data</h1>
<ol>
{this.state.posts.map((post, i) => (
<li key={i} style={{ listStyle: "none" }}>
{post.map((p, j) => (
<p key={j}>{p + (j % 2 === 0 ? "?" : "")}</p>
))}
</li>
))}
</ol>
</Col>
<Col xs={12} sm={6} md={6}>
<Row>
<Table striped bordered condensed hover>
<tbody>
<tr>
{this.state.words.map((post, i) => <td key={i}>{post}</td>)}
</tr>
</tbody>
</Table>
</Row>
</Col>
</Row>
</Grid>
);
}
}
export default About;
答案 0 :(得分:3)
您遇到的问题是由于您使用freqMap变量实现了Arrays:
.then(res => {
const texts = res.data;
let words = texts.replace(/[.]/g, "").split(/\s/);
let freqMap = []; // this should NOT be an array
words.map(w => {
if (!freqMap[w]) {
freqMap[w] = 0;
}
freqMap[w] += 1;
console.table(freqMap);
return freqMap;
});
this.setState({
words: freqMap
});
})
javascript中的数组不是键值对的链接列表,但是当您尝试像let freqMap["Word"] = 1
这样的代码时,javascript不会抱怨。这会导致不同的问题,特别是在尝试循环遍历数组的内容时,就像你遇到的问题一样。
数组不能使用字符串作为元素索引(如在关联中 数组)但必须使用整数。通过非整数设置或访问 使用括号表示法(或点表示法)将不会设置或检索 数组列表本身的元素,但将设置或访问变量 与该数组的对象属性集合相关联。
您应该使用对象:
.then(res => {
const texts = res.data;
let words = texts.replace(/[.]/g, "").split(/\s/);
let freqMap = {}; // this should be an object
words.map(w => {
if (!freqMap[w]) {
freqMap[w] = 0;
}
freqMap[w] += 1;
console.table(freqMap);
return freqMap;
});
this.setState({
words: freqMap
});
})
然后在object.keys
上的JSX循环中,这是一个对象键数组:
{Object.keys(this.state.words).map((post, i) => (
<tr key={i}>
<td>{post}</td>
<td>{this.state.words[post]}</td>
</tr>
))}