React native - 按下按鈕時如何調用異步函數？

我是新來回答原生React native - 按下按鈕時如何調用異步函數？

我想做一個搜索頁面，頂部的搜索欄，而結果會顯示在它下面。我想讓我的搜索按鈕調用getsearchlist，狀態'data'將被設置，並且我的搜索列表將被重新渲染。怎麼做？當我嘗試我的代碼，沒有發生，很快就會顯示網絡請求失敗和「可能未處理的承諾拒絕」

constructor(props) { 
    super(props); 
    this.state = { 
     data: '', 
     text: 'ducati' 
    }; 
    this.getsearchlist = this.getsearchlist.bind(this); 

} 

async getsearchlist() { 
    //console.log(this.state.text); 
    let text = this.state.text; 
    let response = await fetch('https://www.blabla.com'); 
    let responseXmlText = await response.text(); 
    let newsitem = JSON.parse(responseXmlText); 
    let data = []; 
    for (var i = 0; i < newsitem.length; i++) { 
     var content = newsitem[i].content.rendered; 
     var title = newsitem[i].title.rendered; 
     var link = newsitem[i].link; 


     var re = /<img[^>]+src="?([^"\s]+)"?[^>]*\/>/g; 
     var results = re.exec(content); 
     var imgsrc = ''; 
     if (results != null) { 
      imgsrc = results[1]; 
     } 
     data.push({ 
      title: title, 
      content: content, 
      img: imgsrc, 
      link: link 
     }) 
    } 

    this.setState({ 
     data: data 
    }) 

} 

render() { 
     var datas = this.state.data; 

     return (
     <Container> 
      <Header searchBar rounded> 
       <InputGroup> 
        <Icon name='ios-search' /> 
        <Input placeholder='Search' onChangeText={(text) => this.setState({text})} 
      value={this.state.text}/> 
        <Icon name='ios-people' /> 
       </InputGroup> 
      </Header> 


      <Content> 
      <Button onPress={this.getsearchlist}> 
        Search 
       </Button> 
       <List dataArray={datas} 
        renderRow={(data,sectionID, rowID) => 
         <ListItem > 
         <Thumbnail square size={100} source={{uri: data.img}} /> 

          <Text style={[ styles.titlestyle]}>{data.title}</Text> 

         </ListItem> 
        }> 
       </List> 
        </Content> 
     </Container> 



     );

來源

2016-11-14 smithenjelek

你的意思[ListView控件（https://facebook.github.io/react-native/docs/listview.html）？ – abeikverdi

看看我分享的鏈接中的構造函數。您必須將這些添加到您的構造函數中以將數據分配給列表視圖 – abeikverdi

使用這樣的事情。

getSearchList = async() => { 
    ..... 
    ..... 
}

而當你從按鈕調用它時，就像你現在調用它一樣。

<Button onPress={this.getSearchList} /> Search </Button>

希望它有助於名單:)

來源

2018-01-08 20:02:20

React native - 按下按鈕時如何調用異步函數？

回答

相關問題