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

Question

错误

Additional Undefined & Nan displayed

我有存储来自 api 的响应值的数组的 console.log 状态，它给了我预期的结果，当我解析这个响应并使用字符串，对解析的数据进行浮点操作时，它正在添加额外的 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>
    );
  }
}

Answer 1

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