Отображение данных ответа Axios в веб-интерфейсе - PullRequest
Новая
       18

Отображение данных ответа Axios в веб-интерфейсе

1 голос
/ 03 мая 2019

Я пытаюсь отобразить данные ответов 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,
},
});

Когда пользователь нажимает кнопку, мне нужно отправить запрос на публикацию в бэкэнд и отобразить данные ответа в интерфейсе

1 Ответ

1 голос
/ 03 мая 2019

Это потому, что вы изменяете состояние, а не вызываете setState, который говорит реагировать на повторную визуализацию вашего компонента.

Вам нужно сделать что-то вроде этого: 

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