react-native - 如何将数组数组映射到反应本机选择器

Question

如何将属性数组（产品的子数组）映射到选择器中。这是我的 JSON 数据：

{“产品”：[{“productid”：“5466”，“名称”：“腰果”，“描述”：“”，“属性”：[{“product_id”：“5466”，“attribute_name”：“500 grm”，“attribute_price”：“500”}，{“product_id”：“5466”，“attribute_name”：“250 grm”，“attribute_price”：“250”}]}]}

这是我的代码：

renderProductsCart = ({ item }) => {
    return (
      <View style={{ width: "46%", marginLeft: 10, marginTop: 10 }}>
        <Card
          elevation={2}>
          <Card.Cover source={{ uri: item.image }} />
          <Text style={{ marginLeft: 5 }}>{item.name}</Text>
          <Text> ₹: {item.attribute_price}/- </Text>
          <Picker
            selectedValue={this.state.PickerValueHolder}

            onValueChange={(itemValue, itemIndex) => this.setState({ PickerValueHolder: itemValue })} >

            {this.state.data.products.attributes.map((item, key) => (
                        <Picker.Item label={item.attribute_name} value={item.attribute_name} key={item} />)
                    )}
            
          </Picker>
          <View style={{ flexDirection: "row" }}>
            <Card.Actions>
              <Button
                theme={{ colors: { primary: 'black' } }}
                onPress={() => console.log("press")}>View More</Button>
              <Button
                theme={{ colors: { primary: 'black' } }}
                onPress={() => console.log("press")}>Cart</Button>
            </Card.Actions>
          </View>
        </Card>
      </View>
    )
  }

       <FlatList
            data={this.state.data.products}
            renderItem={this.renderProductsCart}
            keyExtractor={(item, index) => index.toString()}
            numColumns={2}
          />

请帮助我提前谢谢

Answer 1

我在这里使用了功能组件，但您也可以使用基于类的组件并以这种方式使用它：输出：

完整示例代码：

import React, {useState, useEffect} from 'react';
import { Text, View, StyleSheet, Picker, FlatList, Button } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
const dataP = {
  products: [
    {
      productid: '5466',
      name: 'Cashew',
      description: '',
      attributes: [
        {
          product_id: '5466',
          attribute_name: '500 grm',
          attribute_price: '500',
        },
        {
          product_id: '5466',
          attribute_name: '250 grm',
          attribute_price: '250',
        },
      ],
    },
  ],
};

export default function App() {
  const [data, setData] = useState({});

  useEffect(() => {
    setData(dataP);
  }, []);

  const renderProductsCart = ({ item }) => {
    return (
      <View style={{ width: '46%', marginLeft: 10, marginTop: 10 }}>
        <Card elevation={2}>
          <Card.Cover source={{ uri: item.image }} />
          <Text style={{ marginLeft: 5 }}>{item.name}</Text>
          <Text> ₹: {item.attribute_price}/- </Text>
          <Picker
            selectedValue={''}
            onValueChange={(itemValue, itemIndex) => this.setState({})}>
            {item?.attributes.map((item, key) => (
              <Picker.Item
                label={item.attribute_name}
                value={item.attribute_name}
                key={item}
              />
            ))}
          </Picker>
          <View style={{ flexDirection: 'row' }}>
            <Card.Actions>
              <Button
                theme={{ colors: { primary: 'black' } }}
                onPress={() => console.log('press')}>
                View More
              </Button>
              <Button
                theme={{ colors: { primary: 'black' } }}
                onPress={() => console.log('press')}>
                Cart
              </Button>
            </Card.Actions>
          </View>
        </Card>
      </View>
    );
  };
  return (
    <View style={styles.container}>
      <FlatList
        data={dataP?.products}
        renderItem={renderProductsCart}
        keyExtractor={(item, index) => index.toString()}
        numColumns={2}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

工作博览会小吃演示