Reactjs 在JSON数组中呈现

我有一个订单页面，在那里我显示一个人下的订单，我在全局JSON中拥有的数据，我可以访问this.state.data，但是，我还想访问JSON中的数组产品并显示它的项目，知道如何相应地循环它吗？请帮忙

我的日志是：

[{
  "__v": 1,
  "_id": "5e44e68d7ce9f60c5cfd0c6b",
  "addressLineOne": "G",
  "city": "J",
  "customerName": "Tr",
  "mobile": 8697779335,
  "order_id": "order_EG7aMZwcx9uQf3",
  "order_verification_status": false,
  "payment_method": "COD",
  "payment_status": false,
  "phoneNumber": 8697779335,
  "pincode": 713211,
  "products": [
    [Object]
  ],
  "state": "B",
  "street": "V"
}, {
  "__v": 1,
  "_id": "5e44e6b87ce9f60c5cfd0c79",
  "addressLineOne": "Fd",
  "city": "J",
  "customerName": "Tr",
  "landmark": "M",
  "mobile": 8697779335,
  "order_id": "order_EG7b82pB6uKRXo",
  "order_verification_status": false,
  "payment_method": "COD",
  "payment_status": false,
  "phoneNumber": 8697779335,
  "pincode": 713211,
  "products": [
    [Object]
  ],
  "state": "V",
  "street": "D"
}]

我的全部代码如下：

import * as React from 'react';
import {
  Text,
  View,
  StatusBar,
  StyleSheet,
  FlatList,
  ActivityIndicator,
  Platform,
  Image,
} from 'react-native';
import { SearchBar, Card, Button } from 'react-native-elements';
import { Appbar } from 'react-native-paper';

export default class Order extends React.Component {
  constructor(props) {
    super(props);
    //setting default state
    this.state = { 
      isLoading: true, 
      search: '' , 
      data: [], 
      orderplaced: [],

    };

  }
  componentDidMount() {
    return fetch('some url')
      .then(response => response.json())
      .then(responseJson => {
        this.setState(
          {
            isLoading: false,
            data: responseJson.orderplaced
          },
          console.log('a',responseJson.orderplaced[0].products),

        );
      })
      .catch(error => {
        console.error(error);
      });
  }

  render() {
    if (this.state.isLoading) {
      //Loading View while data is loading
      return (
        <View style={{ flex: 1, paddingTop: 20 }}>
          <ActivityIndicator />
        </View>
      );
    }
    return (

      <View style={{ backgroundColor: '#f0f8ff', height: '100%' }}>
        <Appbar.Header style={{ backgroundColor: 'white' }}>
        <Appbar.BackAction onPress={() =>this.props.navigation.navigate('User')} />
          <Appbar.Content title="Orders" />
        </Appbar.Header>
        <View>
          <SearchBar
            round
            lightTheme
            searchIcon={{ size: 24 }}
            onChangeText={text => this.SearchFilterFunction(text)}
            onClear={text => this.SearchFilterFunction('')}
            placeholder="Type Here..."
            placeholderTextColor="black"
            value={this.state.search}
            containerStyle={{
              backgroundColor: '#f0f8ff',
              borderBottomColor: '#f0f8ff',
              borderTopColor: '#f0f8ff',
              padding: 10,
            }}
          />

 <FlatList
          showsVerticalScrollIndicator={false}
          index = {0}
          data={this.state.data}
          // ItemSeparatorComponent={this.ListViewItemSeparator}
          //Item Separator View
          renderItem={({ item }) => (
            // Single Comes here which will be repeatative for the FlatListItems


              <Card
              containerStyle={{ padding: 10, marginLeft: 3, marginRight: 3 }}>
              <View>
        <View style={{ flexDirection: 'row' }}>
          <Image
            style={{ height: 100, width: 100, marginLeft: 0 }}
            source={{
              uri:
                item.urlImg}}
          />

          <View sttle = {{ flexDirection: 'column'}}>
<Text style={{ paddingLeft: 20 }}>Order Id - {item._id}</Text>
          <Text style={{ paddingLeft: 20 }}>{item.title}</Text>
            <Text>{this.renderProducts}</Text>
          <Text style={{ paddingLeft: 20 }}>INR{item.totalPrice} . {item.customerName} </Text>
          <Text style={{ paddingLeft: 20 }}>Time </Text>
          </View>
        </View>
      </View>
            </Card>



          )}
          enableEmptySections={true}
          style={{ marginTop: 10 }}
          keyExtractor={(item) => item.order_id}
        />
        </View>

      </View>
    );
  }
}

---

因此，您可以通过以下方式简单地对产品进行循环：

renderProducts = () => {

return this.state.data.products.map((data,index) => {
return(

<View>
<Text>{data.customerName}</Text>
</View>
)

});

}

renderProducts=（）=>{
返回此.state.data.products.map（（数据，索引）=>{
返回(
{data.customerName}
)
});
}

在主渲染中，您可以有：

render(){

return(

<View>
{this.renderProducts()}
</View>
)
}

render（）{
返回(
{this.renderProducts（）}
)
}

更新：

您的新代码应该如下所示：

class ABC extends Component {

renderProducts = () => {

    return this.state.data.products.map((data,index) => {
    return(

    <View>
    <Text>{data.customerName}</Text>
    </View>
    )

    });

    }


 render(){

    return(

    <View>
    {this.renderProducts()}
    </View>
    )
    }




}

ABC类扩展组件{
renderProducts=（）=>{
返回此.state.data.products.map（（数据，索引）=>{
返回(
{data.customerName}
)
});
}
render（）{
返回(
{this.renderProducts（）}
)
}
}

这有帮助吗

希望能有帮助。请放心，您可以使用

示例如下：

{ this.state.data.map(message => (
        <div className="newmessage">
            <p>User: {message.user}</p>
            <p>Message: {message.message}</p>
        </div>
    ))}

{this.state.data.map（消息=>(
用户：{message.User}

消息：{Message.Message}

))}

我建议您仔细阅读并查看扁平列表组件。它完全符合您的要求和其他有用的功能。

在主渲染中根本没有调用此函数，为什么会这样？请帮助，我必须尽快完成此操作，请调用此函数，但它向我抛出了一个错误，即“orderplaced[0]为空：未定义”，您能告诉我原因吗？你能检查我的全部代码吗？我已经在你的控制台日志中更新了只需打印reposne json并请为我提供更新响应的输出。在我的问题结束时，你可以检查，当我在render中调用此函数时，该函数根本没有被调用，我为函数提供的控制台似乎也没有恢复，数据也没有恢复

{ this.state.data.map(message => (
        <div className="newmessage">
            <p>User: {message.user}</p>
            <p>Message: {message.message}</p>
        </div>
    ))}