Отображение значения из массива данных в React Native - PullRequest
Новая
       38

Отображение значения из массива данных в React Native

0 голосов
/ 30 сентября 2019

Я получил эти данные из моего API. Как я могу показать значение свойства name в текстовом вводе? 

[
    {
        "id": "1",
        "userid": "",
        "is_admin": "1",
        "name": "Anshul Gupta",
        "email": "testuser@gmail.com",
        "company": "Kissui Metaliks and Steels Pvt. Ltd.",
        "jobtitle": "Director",
        "address": "366 and 368, MIE Part A, Bahadurgarh,Haryana,IndiaBahadurgarh, Haryana",
        "cityid": "haryana",
        "stateid": "Abohar",
        ...
    }
]

Ответы [ 3 ]

0 голосов
/ 30 сентября 2019

привет @DivyaLal тихий прямой ответ. все, что вам нужно сделать, - это использовать указатель конкретного массива с тем ключом, который вам нужен для отображения. как вы сказали, вам нужно отображать значения в текстовом вводе, пожалуйста, проверьте приведенный ниже пример 

    import React, { Component } from 'react';
    import { TextInput, View } from 'react-native';

    export default class HelloWorldApp extends Component {

      constructor(props) {
        super(props);
        this.state = {
arr= yourArr
}
      }


     render() {
        return (
          <View>
            <TextInput 
    value = {arr[0].name}/> // to display name in textinput

<TextInput 
value={arr[0].email}/> // to dsiplay email
          </View>
        );
      }
    }

Надеюсь, это поможет .... Удачного кодирования !!

0 голосов
/ 30 сентября 2019

Если вы хотите предварительно заполнить значение имени из API в текстовом вводе, просто установите значение ввода с помощью this.setState, как только API получит информацию о пользователе. 

//Your state 

this.state = {
text: ''
}

// Your text input

      <TextInput
        onChangeText={text => this.setState({text})}
        value={this.state.text}
      />

// Now when your component loads check if user data is in Async storage otherwise call API.Instead of using await you can use .then and set state after receiving the json.

    AsyncStorage.getItem('user').then(user => {
      fetch('myAPi=' + userData.id)
        .then(res => res.json())
        .then(responseJson => this.setState({ dataSource: responseJson, text: responseJson.name }));
    });

Я также рекомендую не с использованием AsyncStorage для хранения пользовательских данных, поскольку они полностью не зашифрованы, кроме вашего вызова.

0 голосов
/ 30 сентября 2019

Я не уверен, но думаю, это то, что вы ищете: 

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

        export default class HelloWorldApp extends Component {

          constructor(props) {
            super(props);
            this.state = { dataSource:[]}
          }

          async componentDidMount(){
            try {
              AsyncStorage.getItem("user")
                .then(async (user)=>{
                  const response = await fetch('myAPi=' + userData.id );
                  const responseJson = await response.json();
                  this.setState({ dataSource: responseJson})
                })
            }
          }

          render() {
            return (
              <View>
                <Text>{this.state.dataSource[0]['name']}</Text>
                <TextInput
                  style={{ height: 40, borderColor: 'gray', borderWidth: 1 }} 
                  onChangeText={text => onChangeText(text)}
                  value={this.state.dataSource[0]['name']}
                />
                <TextInput
                  style={{ height: 40, borderColor: 'gray', borderWidth: 1 }} 
                  onChangeText={text => onChangeText(text)}
                  value={this.state.dataSource[0]['email']}
                />
              </View>
            );
          }
        }
...