React 16只是将数字数组渲染到map函数

时间:2018-01-19 14:03:15

标签: javascript reactjs react-table

我一直试图渲染大多数频率的单词。我已经完成了获取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;

1 个答案:

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