获取未定义,在获得正确输出后显示NaN

时间:2018-02-13 13:49:10

标签: javascript reactjs react-native jsx

错误

Additional Undefined & Nan displayed

我有来自api的存储响应值的数组的console.log状态,它给了我预期的结果,当我解析这个响应并对解析的数据使用String,float操作时,它正在添加额外的undefined,NaN %。

控制台

Console of the response state

代码

import React from 'react';
import { StyleSheet, Text, View,TextInput } from 'react-native';
import axios from 'axios';

export default class OutputScreen extends React.Component {
  constructor(props) {
    super(props);
    this.renderCategory = this.renderCategory.bind(this);
    this.state={watdata:[]};
}

  componentWillMount()
  {
    const {state} = this.props.navigation;

  axios.post('https://app.accumulate65.hasura-app.io/api2',
  {
     username:'*****',
    type:state.params.inp,
    input:state.params.statement
   })
 .then(response =>this.setState({watdata:Object.values(response.data)})) 
 .catch(error => {
  console.log(error.response)
});

  }
  renderCategory()
  {
  return this.state.watdata.map((data)=>(<View style={{marginLeft:5}}>
   <Text>{String(data[0].label).substring(String(data[0].label).lastIndexOf("/") + 1, String(data[0].label).length)}                                {parseFloat(String(data[0].score)).toFixed(4)*100} %</Text>
   <Text>{String(data[1].label).substring(String(data[1].label).lastIndexOf("/") + 1, String(data[1].label).length)}                                {parseFloat(String(data[1].score)).toFixed(4)*100} %</Text>
   <Text>{String(data[2].label).substring(String(data[2].label).lastIndexOf("/") + 1, String(data[2].label).length)}                                {parseFloat(String(data[2].score)).toFixed(4)*100} %</Text>
   </View>));


  }


  render() {
    console.log(this.state);
    if(!this.state.watdata){
      return null;
  }
    return (
      <View>
         <Text style={{fontWeight:"bold",marginLeft:5}}>Your Results: </Text>
        <Text style={{fontWeight:"bold",marginLeft:5}}>Category Name                Confidence</Text>
        <View>{this.renderCategory()}</View>
      </View>
    );
  }
}

1 个答案:

答案 0 :(得分:1)

watdata是一个包含两个条目的数组 - 第一个是带有3个成员的标签/分数对象列表。顶级watdata数组中的第二个条目是您编辑的字符串。当您在watdata方法中映射renderCategory时,您有两个元素,并且您会查看每个元素的索引0,1和2,这会导致您总共有六个条目。最后三个都是未定义的,因为watdata中的第二个元素是一个字符串。