React native 在前端显示axios响应数据

我正在尝试在react本机前端显示axios响应数据。我不清楚该怎么做

我试图将响应数据存储到一个数组中，并将其显示为一个平面列表，但仍然没有得到输出

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

const serverURL ='http://192.168.8.100:5000';
const http = axios.create({
   baseURL:serverURL,
});

export default class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      treeType:'',
      midgirth:'',
      length:'',
      rslt:[],
    };
  }


  onCalculate(){
    const{treeType,midgirth,length,rslt} = this.state;

    http.post('/calculations',{
      treeType:treeType,
      midGirth:midgirth,
      length:length
    })
    .then(function(response){
      rslt.push(response.data);
      alert("Response :",response.data);
      console.log(response.data);
      console.log(rslt);
    })
    .catch(function(error){
      alert("Error",error);
    });

  }


  render() {
    return (
      <View style={styles.container}>
        <TextInput
        style={styles.textinput}
        placeholder="Tree Type"
        onChangeText={(val)=>this.setState({treeType:val})}
        />
        <TextInput style={styles.textinput} 
        placeholder="Mid-Girth"
        underlineColorAndroid={'transparent'}
        onChangeText={midgirth=> this.setState({midgirth})}
        />
        <TextInput style={styles.textinput} 
        placeholder="Length"
        underlineColorAndroid={'transparent'}
        onChangeText={length=> this.setState({length})}
        />
        <Button title='Calculate' onPress={()=>this.onCalculate()}/>

        <FlatList
          data={this.state.rslt}
          renderItem={({item}) => <Text>{item}</Text>}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  textinput: {
    backgroundColor:'rgba(255,255,255,0.7)',
    borderRadius:20,
    paddingHorizontal:16,
    color:'#000000',
    fontSize:25,
    marginVertical:10,
    borderWidth:3,
    borderColor: '#005662',
    margin:10,
},
});

import React，{Component}来自'React'；
从“axios”导入axios；
从“react native”导入{样式表、文本、视图、文本输入、按钮、平面列表}；
常量服务器URL=http://192.168.8.100:5000';
const http=axios.create({
baseURL:serverURL，
});
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
树型：“”，
中围：''，
长度：''，
rslt:[]，
};
}
再次计算（）{
const{treeType，midgirth，length，rslt}=this.state；
http.post（“/calculations”{
树型：树型，
中围：中围，
长度：长度
})
.然后（功能（响应）{
rslt.push（响应数据）；
警报（“响应：”，响应.数据）；
console.log（response.data）；
控制台日志（rslt）；
})
.catch（函数（错误）{
警报（“错误”，错误）；
});
}
render（）{
返回(
this.setState（{treeType:val}）}
/>
this.setState（{midgirth}）}
/>
this.setState（{length}）}
/>
this.onCalculate（）}/>
{item}
/>
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”，
},
文本输入：{
背景颜色：'rgba（255255,0.7）'，
边界半径：20，
水平方向：16，
颜色：'#000000'，
尺寸：25，
玛吉：10，
边框宽度：3，
边框颜色：'#005662'，
差额：10，
},
});

---

当用户单击按钮时，我需要将post请求发送到后端，并在前端显示响应数据，这是因为您正在改变状态，而不是调用setState，它告诉react重新呈现组件

您需要这样做：

http.post('/calculations', {
    treeType: treeType,
    midGirth: midgirth,
    length: length
})
.then(function (response) {
    rslt.push(response.data);
    this.setState({rslt}); // or this.forceUpdate();
    alert("Response :", response.data);
    console.log(response.data);
    console.log(rslt);
}.bind(this))
.catch(function (error) {
    alert("Error", error);
}); 

---

反应如何？

console.log（rslt）

/

console.log（response.data）

的输出是什么？您确定您的后端发送了一些内容吗？代码中的所有内容似乎都相对良好。如果后端响应您没有看到任何警报，至少应该得到一些信息，rigth？{currentPrice:3506183.4，length:2000，midgirth:1，treetype:“Jak”，usefulLogCCM:3539600，…}这是我从console.log（response.data）@TimHI获得的响应警报。我想在一个平面列表中显示所有键值对。那么我可以在一个平面列表中呈现两个项目吗？这段代码给我错误警报。当我放置一个console.log（error）时，我得到一个错误“this.setState不是一个函数”