Arrays 在React Native中显示数据数组中的值

我从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",
        ...
    }
]

---

我不确定，但我想这就是你想要的：

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

import React，{Component}来自'React'；
从“react native”导入{Text，View，TextInput}；
导出默认类HelloWorldApp扩展组件{
建造师（道具）{
超级（道具）；
this.state={dataSource:[]}
}
异步组件didmount（）{
试一试{
AsyncStorage.getItem（“用户”）
。然后（异步（用户）=>{
const response=await fetch（'myAPi='+userData.id）；
const responseJson=wait response.json（）；
this.setState（{dataSource:responseJson}）
})
}
}
render（）{
返回(
{this.state.dataSource[0]['name']}
onChangeText（文本）}
值={this.state.dataSource[0]['name']}
/>
onChangeText（文本）}
值={this.state.dataSource[0]['email']}
/>
);
}
}

hi@DivyaLal这是一个直截了当的回答。您所需要做的就是使用特定数组的索引和您需要显示的任何键。正如您所说，您需要在textinput中显示值，请检查下面的示例

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

import React，{Component}来自'React'；
从“react native”导入{TextInput，View}；
导出默认类HelloWorldApp扩展组件{
建造师（道具）{
超级（道具）；
此.state={
arr=你的arr
}
}
render（）{
返回(
//在textinput中显示名称的步骤
//向dsiplay发送电子邮件
);
}
}

---

希望这有帮助。。。。快乐编码

如果要在文本输入中预填充API中的名称值，只需在API获取用户信息后使用this.setState设置输入值即可

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

//您所在的州
此.state={
文本：“”
}
//您的文本输入
this.setState（{text}）}
值={this.state.text}
/>
//现在，当您的组件加载时，请检查用户数据是否在异步存储中，否则请调用API。而不是使用wait，您可以使用。然后在收到json后设置状态。
AsyncStorage.getItem（'user'）。然后（user=>{
fetch（'myAPi='+userData.id）
.then（res=>res.json（））
.then（responseJson=>this.setState（{dataSource:responseJson，text:responseJson.name}））；
});

---

我还建议不要使用AsyncStorage来存储用户数据，因为它是完全未加密的，但您的调用是无效的

你到底是什么意思？yourArray[0]['name']返回名称！已从api获取此数据。要在TextInput上呈现其值，如名称、电子邮件等，请共享输入区号！构造函数（props）{super（props）；this.state={dataSource:[]，}}}async componentDidMount（）{try{AsyncStorage.getItem（“用户”）。然后（async（user）=>{const response=await fetch（'+userData.id）；const responseJson=await response.json（）；this.setState（{dataSource:responseJson，}）}}是的，但这不显示名称。throw error undefined不是一个对象（计算'this.state.dataSource[0]['name']），可能是因为您的数据！看看这个：这就是组件的安装问题。数据源数组[对象{“id”：“1”，“is_admin”：“1”，“is_superseller”：“0”，“jobtitle”：“Director”，“lastlogin”：“2019-09-30 07:08:57”，“logincount”：“27267”，“mobile”：“9871323193”，“mobile1”：“fdfd”，“name”：“Anshul Gupta”，“password”：“ss1234554321pl”，}，]@DivyaLal此错误可能是由于在初始渲染时没有可用数据造成的。为避免此错误，简单的解决方案是Text==>{this.state.dataSource[0]&&this.state.dataSource[0]['name']}和TextInput===>value={this.state.dataSource[0]&&this.state.dataSource[0]['name'}或value=>{this.state.dataSource[0]？this.state.dataSource[0]['name']：“”}未在TextInput中获取任何值。能否提供完整的组件代码？我认为这将使调试更容易。否则，在尝试本文建议的许多解决方案时，很容易出现语法错误。