React native 如何在API中显示产品名称？

我有一个包含两个产品的阵列。（稍后，列表将更加完整，目前是为了测试我喜欢的自动完成） 我想在使用“react native dropdown autocomplete”软件包进行的自动完成输入中显示这两种产品的名称列表。 我想在state中初始化name，我关心的是，当我请求显示this.state.name时，它会返回未定义的名称，因为两个产品的两个名称在数组中不同

 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返回多个对象（即多个名称不同的产品）的事实，而我的编码是为了只管理一个产品。

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

我的代码：

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;

类票证扩展组件{
建造师（道具）{
超级（道具）；
此.state={
新闻界：错，
hasCameraPermission:null，
引用：“”，
名称：“”，
lastScannedUrl:null，
eventSelected:false，
displayArray:[]
};
}
initListData=async（）=>{
let list=等待获取产品（1）；
如果（列表）{
这是我的国家({
displayArray:list，
参考：list.reference，
name:list.name
});      
}
//console.log（'name dans initListData='，list.name）
//console.log（'reference dans initListData='，list.reference）
};
异步不安全组件willmount（）{
this.initListData（）；
};
componentDidMount（）{
this.getPermissionsAsync（）；
}
getPermissionsAsync=async（）=>{
const{status}=wait Permissions.askAsync（Permissions.CAMERA）；
this.setState（{hasCameraPermission:status==“grated”}）；
};
把手代码=（{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）{
返回{i18n.t（“scan.request”）}；
}
if（hasCameraPermission===false）{
返回{i18n.t（“scan.noaccess”）}；
}
返回(
{scanned&&(
this.setState（{scanned:false}）
disabled={this.state.selectedItem===null}
/>
)}    
);
}
handleSelectItem（项目、索引）{
const{onDropdownClose}=this.props；
onDropdownClose（）；
this.setState（{eventSelected:true}）
//控制台日志（项目）；
}
render（）{
const{hasCameraPermission，scanned，Press}=this.state；
设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）
返回(
{}}
handleSelectItem={（项目，id）=>this.handleSelectItem（项目，id）}
onDropdownClose={（）=>onDropdownClose（）}
onDropdownShow={（）=>onDropdownShow（）}
数据={this.state.name}
MinimumCharacterScont={2}
高亮文本
valueExtractor={item=>item.name}
右内容
rightTextExtractor={item=>item.properties}
/>          
{this.state.eventSelected(
{this.renderBarcodeReader（）}
) : (
{i18n.t（“tickets.warning”）}
)}
);
}
}
导出默认票据；

我从您的代码中找到了什么。我想问题就在这里

data={this.state.name}

这里你必须通过你的数组

data={Your_array}

---

假设

let list=wait getProducts（1）

返回一个

数组

而不是

对象

。是否尝试了

名称：列表[0]？.name

而不是

名称：列表.name

。也适用于

。但是您正在传递的
this.state.name
似乎不正确。非常感谢，这正是所需要的。非常感谢，真是松了一口气！：）