0

我一直在尝试呈现频率最高的单词。我已经完成了获取 API。要呈现有总数的单词。我还有 setState 单词和映射的单词数组。render()我期望单词有计数。我只得到数字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;
4

1 回答 1

3

您遇到的问题是由于您使用 freqMap 变量实现的数组：

.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
    });
  })

然后在 JSX 循环中，object.keys这是一个对象键数组：

 {Object.keys(this.state.words).map((post, i) => (
        <tr key={i}>
          <td>{post}</td>
          <td>{this.state.words[post]}</td>
        </tr>
  ))}
于 2018-01-19T14:56:36.487 回答