React Native - 如何在按钮按下时调用异步函数？

Question

我是React Native的新手

我正在尝试创建一个搜索页面，搜索栏位于页面顶部，而结果将显示在其下方。我希望我的搜索按钮调用getsearchlist函数，设置“data”状态并重新渲染我的搜索列表。该怎么做？当我尝试运行代码时，什么也没有发生，很快就会出现“网络请求失败”和“可能未处理的Promise拒绝”错误。

    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>



        );

- smithenjelek

---

你的意思是通过List指的是ListView吗？ - abeikverdi

看一下我分享的链接中的构造函数。您需要将这些内容添加到您的构造函数中，以便将数据赋值给ListView。 - abeikverdi

Answer 1

使用类似这样的东西。

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

并且当你从按钮中调用它时，调用方式应该像现在的调用方式一样。

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

希望这可以帮助你 :)

- Rishichandra Wawhal

Answer 2

现在你可以使用以下语法：

<Button onPress={async () => { ... your async code ... }} />Search</Button>

- Zoltán Hajdú

---

但 onPress 处理程序是否等待异步方法完成呢？我认为不会，因为这可能会占用 UI 线程并使应用程序无响应。此外，这种方法不符合 typescript-eslint 规范（请参见 https://github.com/typescript-eslint/typescript-eslint/issues/4619）。 - Carl G