React 16 只是将数字数组渲染为 map 函数中的 table 数据

Question

我一直在尝试渲染频率最高的单词。我已经完成了提取 API.To 渲染词，其中总计 count.I 也有 setState 词和映射词数组 render()。我期望有计数的词。我只得到数字 1 1 1 1 1 1 1 1 1 1 1 2 1。在 table 数据中。

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

您遇到的问题是由于您使用 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 中的数组不是键值对的链接列表，尽管 javascript 不会在您尝试 let freqMap["Word"] = 1 之类的操作时抱怨，就像您在代码中所做的那样。这将导致不同的问题，尤其是在尝试遍历数组内容时，就像您遇到的问题一样。

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

React 16 只是将数字数组渲染为 map 函数中的 table 数据

React 16 just renders array of numbers into table data in map function

javascript

reactjs

react-table