Question

我正在使用带有laravel后端的RESTfull API开发带有react-native的应用程序，我有一个对象，其中包含数组。我正在使用它来创建用户的个人资料页面。但我不知道如何渲染这些数组。这是我的api响应：

{
  meta: {
    code: 200,
    message: 'Success',
    errors: []
  },
  data: {
    users: [
      {
        personal_information: {
          full_name: 'hesam sameni',
          avatar: 'https://aaa/file/image/hesamsameni.jpeg',
          rate: '0.0',
          phone: [],
          location: {
            name: 'something',
            lat: 00,
            long: 00,
            address: 'something',
            distance: 00
          },
          about: {
            quote: 'something',
            bio: 'something'
          },
          topics: {
            a: 'a',
            b: 'b',
            c: 'c',
            d: 'd'
          },
          stats: {
            a: 10,
            b: 0,
            c: 0,
            d: 0,
            e: 0
          },
          experiences: [
            {
              title: 'something',
              organization: 'something',
              start: 'something',
              end: 'something'
            }
          ],
          educations: [
            {
              title: 'something1',
              university: 'something1',
              major: 'something1',
              start: 'something1',
              end: 'something1'
            },
            {
              title: 'something2',
              university: 'something2',
              major: 'something2',
              start: 'something2',
              end: 'something2'
            }
          ]
        }
      }
    ]
  }
};

例如，如何在用户个人资料中显示教育程度？

这是render方法（我已经从api获取数据并存储在状态{this.state.dataSource}

渲染方法：

render() {
  return (
    <View>
      <FlatList
        data={this.state.dataSource}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => (
          <View>
            <Text>Name: {item.personal_information.full_name}</Text>
            <Text>Rate: {item.personal_information.Rate}</Text>
            <Text>Educations:</Text>
            // Here I need to display all of user's educations
          </View>
        )}
      />
    </View>
  );
}

我不确定是否必须使用Flatlist，因为它仅是一个特定用户的数据，但是我不知道如何使用Flatlist来呈现数据。

Answer 1

尝试此操作将帮助您实现所需的目标。如果不告诉我..

     <FlatList
  data={this.state.itemArray}
  keyExtractor={(item, index) => index.toString()}
  renderItem={({item}) =>{
    console.warn(item.data.users[0].personal_information.educations)
  return(<FlatList
data={item.data.users[0].personal_information.educations}
keyExtractor={(item, index) => "D"+index.toString()}
renderItem={({item}) =>{
console.warn(item)
}
}/>)
  }
}/>

如果您想从personal_information中获取某些信息试试这个例子：console.warn(item.data.users[0].personal_information.full_name)

Answer 2

因此.map本身仅提供您关心的一个值...也就是说，有几种解决方法：

// instantiation
this.state.dataSource

//Using `.map` directlly
this.state.dataSource.map((obj, index)=> {
    console.log(obj);
    return(
        <View />
    )
});

// what's built into Map for you
this.state.dataSource.forEach( (val, key) => console.log(key, val) ); 

// what Array can do for you
Array.from( this.state.dataSource ).map(([key, value]) => ({ key, value }));

// less awesome iteration
let entries = this.state.dataSource.entries( );
for (let entry of entries) {
  console.log(entry);
}

请注意，在第二个示例中，我正在使用很多新东西... ...Array。from会进行任何迭代（每次使用[].slice.call( )时都会加上Sets和Maps），并且将其转换为数组……将地图强制转换为数组后，将转换为数组数组，其中el[0] === key && el[1] === value; （基本上，与我在上面示例地图中填充的格式相同）。

我正在使用在lambda的参数位置处对数组进行解构的方法，将这些数组点分配给值，然后再为每个el返回一个对象。

如果您在生产中使用Babel，则需要使用Babel的浏览器polyfill（包括“ core-js”和Facebook的“ regenerator”）。我可以肯定它包含Array.from。

Answer 3

render(){
     console.log(this.state.data.users[0].personal_information.educations,'cdscdscdcds')
    return(
        <div>

            {this.state.data.users.map((value)=>{
                console.log(value,'cd')
            })}
        </div>

如何在react-native

3 个答案: