如何显示 API 中产品的名称？

Question

我有一个包含两个产品的数组。（稍后，列表会更完整，目前是为了测试我这样做的自动完成）我想在使用 'react-native-dropdown-autocomplete' 包进行的自动完成输入中显示这两种产品的名称列表。我想在状态下初始化名称，我担心的是当我要求显示 this.state.name 时，它 returns 我未定义，因为两个产品的两个名称在数组中不同。

 Array [
      Object {
        "cost": 0,
        "created_at": "2020-12-14T15:54:50Z",
        "custom_fields": Object {
          "_161_": "4137",
          "_162_": "48",
          "_163_": "10926",
          "_164_": "0",
          "_165_": "FLY",
          "_166_": "2020-12-14T14:54:37.737Z",
          "_167_": "2020-12-31T14:54:37.737Z",
          "_168_": "0",
          "_171_": "0",
          "_300_": "412:00",
          "_301_": "45.725556|5.081111",
          "_302_": "-27.7078990936|-67.0951004028",
          "_303_": "Lyon Saint-Exupéry Airport",
          "_304_": "Londres/Belén Airport",
          "_310_": "60",
        },
        "description": "",
        "family_id": 0,
        "id": 1061,
        "incl_tax": 0,
        "is_visible": 1,
        "name": "Lyon Saint-Exupéry Airport (14/12/2020 à 15:54) > Londres/Belén Airport (31/12/2020 à 15:54)",
        "photo": "",
        "quantity": 0,
        "reference": "",
        "stock_status": "1",
        "tax_rate_id": 0,
        "unit": "",
        "updated_at": "2020-12-14T15:54:50Z",
        "weight": 0,
      },
      Object {
        "cost": 0,
        "created_at": "2020-11-15T01:38:08Z",
        "custom_fields": Object {
          "_161_": "1373",
          "_162_": "30",
          "_163_": "4680",
          "_164_": "0",
          "_165_": "FLY",
          "_166_": "2020-11-21T00:37:00.000Z",
          "_167_": "2020-11-29T00:37:00.000Z",
          "_168_": "0",
          "_171_": "0",
          "_300_": "190:00",
          "_301_": "43.6539083949|-79.65785399079999",
          "_302_": "-22.285699844399996|-62.7136993408",
          "_303_": "Tarten Heliport",
          "_304_": "Santa Victoria Airport",
          "_310_": "-480",
        },
        "description": "",
        "family_id": 0,
        "id": 896,
        "incl_tax": 0,
        "is_visible": 1,
        "name": "Tarten Heliport (2020-11-21 at 16:37) > Santa Victoria Airport (2020-11-29 at 16:37)",
        "photo": "",
        "quantity": 0,
        "reference": "",
        "stock_status": "1",
        "tax_rate_id": 0,
        "unit": "FLY",
        "updated_at": "2020-11-15T01:38:08Z",
        "weight": 0,
      },
    ]

我需要一些帮助来弄清楚如何显示产品名称。

我知道我的错误来自于 API returns 几个对象（= 几个不同名称的产品），而我已经编码以便管理只有一个产品。

我需要一些帮助和解释，我运行在兜圈子，迷失在我的代码中，坦率地说，有点绝望。我要感谢你的帮助和解释。谢谢

我的代码：

class Tickets extends Component {
  constructor(props) {
    super(props);
    this.state = {
      Press: false,
      hasCameraPermission: null,
      reference: '',
      name:'',
      lastScannedUrl:null,
      eventSelected: false, 
      displayArray: []      
    };
  }

   initListData = async () => {
    let list = await getProducts(1);
   
    if (list) {
      this.setState({
        displayArray: list,
        reference: list.reference,
        name: list.name
      });      
    }
   // console.log('name dans initListData =', list.name)
   // console.log('reference dans initListData =', list.reference)
  };

   async UNSAFE_componentWillMount() {
    this.initListData();
  };

  componentDidMount() {
    this.getPermissionsAsync();    
  }

  getPermissionsAsync = async () => {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({ hasCameraPermission: status === "granted" });
  };

  handleBarCodeScanned = ({ type, data }) => {
    this.setState({ Press: false, scanned: true, name: data });
    this.props.navigation.navigate('ProductDetails', {name : parseInt(this.state.state.name)})
  };

  renderBarcodeReader = () => {
    const { hasCameraPermission, scanned } = this.state;

    if (hasCameraPermission === null) {
      return <Text>{i18n.t("scan.request")}</Text>;
    }
    if (hasCameraPermission === false) {
      return <Text>{i18n.t("scan.noaccess")}</Text>;
    }
    return (
      <View
        style={{
          flex: 1,
          ...StyleSheet.absoluteFillObject
        }}
      >   
      <Camera
        onBarCodeScanned={scanned ? undefined : this.handleBarCodeScanned}
        barCodeScannerSettings={[Camera.Constants.Type.qr]}
        style={{flex:1}}
      />
        {scanned && (
          <Button
            title={"Tap to Scan Again"}
            onPress={() => this.setState({ scanned: false })}
            disabled={this.state.selectedItem===null}
          />
        )}    
      </View>
    );
  }
  handleSelectItem(item, index) {
    const {onDropdownClose} = this.props;
    onDropdownClose();

    this.setState({eventSelected: true})
    //console.log(item);
  }
  render() {
    const { hasCameraPermission, scanned, Press } = this.state;
    let marker = null;

    const {scrollToInput, onDropdownClose, onDropdownShow} = this.props;

 console.log('displayArray', this.state.displayArray, 'name', this.state.name)
console.log('this.state retourne', this.state)
    return (
      <View style={{flex:1}}>         
        <View style={{width: "100%", zIndex: 100}}>                         
          <Autocomplete
            key={shortid.generate()}
            containerStyle={{margin: 0, padding: 0, borderBottomColor: 'transparent',}}
            inputStyle={{ width: '80%', borderWidth: 1, backgroundColor: '#FFF', opacity: 0.9, borderColor: '#F78400'}}
            placeholder={i18n.t("tickets.event")}
            placeholderColor="#F78400"
            pickerStyle={styles.autocompletePicker}
            scrollStyle={styles.autocompleteScroll}
            scrollToInput={ev => {}}
            handleSelectItem={(item, id) => this.handleSelectItem(item, id)}
            onDropdownClose={() => onDropdownClose()}
            onDropdownShow={() => onDropdownShow()}              
            data={this.state.name}
            minimumCharactersCount={2}
            highlightText
            valueExtractor={item => item.name}
            rightContent
            rightTextExtractor={item => item.properties}
          />          
        </View>
        {this.state.eventSelected ? (
          <View>
          {this.renderBarcodeReader()}
          </View>
          ) : (
          <Text style={{ top: '33%', zIndex:100, color: 'red', fontStyle: 'italic', fontSize: 18}}>{i18n.t("tickets.warning")}</Text>
            )}
      </View>
    );
  }
}
export default Tickets;

Answer 1

我从您的代码中发现了什么。我想问题出在这里

data={this.state.name}

这里你必须传递你的数组。

data={Your_array}

如何显示 API 中产品的名称？

How to display names from products in API?

api

state

react-native

display