javascript - React 16 只是将数字数组渲染到映射函数中的表数据中

Question

我一直在尝试渲染频率最高的单词。我已经完成了获取 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;

Answer 1

您遇到的问题是由于您实现了 Arrays使用您的 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 不会提示。这将导致不同的问题，特别是在尝试循环数组的内容时，就像您遇到的问题一样。

Arrays cannot use strings as element indexes (as in an associative array) but must use integers. Setting or accessing via non-integers using bracket notation (or dot notation) will not set or retrieve an element from the array list itself, but will set or access a variable associated with that array's object property collection.

你应该使用一个对象来代替:

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