Javascript 有没有办法在onClick事件之后获取获取的结果？

我有一个基本的应用程序，允许用户查找圣经经文。有没有一种方法可以在我放置的位置显示提取结果：

提取结果应该显示在这里

下面？这个过程似乎很简单，但我有点卡住了。我已经尝试在我的

this.getcrossist（…）

方法中返回获取的数据，然后将其分配给一个变量，例如：

data=this.getcrossist（…）

，然后使用

{data}

但是发生这种情况时，我看不到任何东西，因为页面可能没有刷新。。？需要任何帮助。谢谢

显示提取数据的UI:

        <div>
            <ul className = "list-group">
                {this.state.posts.map((each) => (
                    <li key = {each.index} >
                        <Accordion>
                            <Card>
                                <Accordion.Toggle as={Card.Header} eventKey="0">
                                    <Button variant = 'info' onClick={()=>this.getScripture(each.book, each.chapter, each.verse)}><b>Click Me to Show/Hide Biblical Comparision</b></Button>
                                </Accordion.Toggle>
                                <Accordion.Collapse eventKey="0">
                                    <p>fetch results should show up here</p>
                                </Accordion.Collapse>
                            </Card>
                        </Accordion>
                    </li>
                    ))}
            </ul>
        </div>

getScripture(book, chapter, verse) {
    const url = '/api/bibleVerse' //communicates with an express backend
    var scripture = {
        bible_url: `https://getbible.net/json?passage=${book}${chapter}:${verse}&version=akjv`,
        book: book,
        chapter: chapter,
        verse: verse
    }
    fetch(url, {
        method: 'POST',
        credentials: 'include',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(scripture)
    })
    .then((response) => response.text())
    .then((data) => {
        console.log(data)
        //return data..this (doesn't really work as I described in my description)
    })
    .catch((err) => {
        console.log(err)
    })  
}

---

尝试使用更改代码

// first you need to use the arrow syntax to have access the the this object:
getScripture = (book, chapter, verse) => { 
...
.then((data) => {
    console.log(data);
    this.setState({data: data});
})

在另一部分

<p>{this.state.data}</p>

{this.state.data}

尝试使用

// first you need to use the arrow syntax to have access the the this object:
getScripture = (book, chapter, verse) => { 
...
.then((data) => {
    console.log(data);
    this.setState({data: data});
})

在另一部分

<p>{this.state.data}</p>

{this.state.data}

您需要使用状态来实现这一点。在

then（data=>{…}

块中，设置包含此数据的状态。然后可以在渲染中使用该状态。this.setState将使用新状态重新渲染。需要使用状态来实现此目的。在

then（data=>{…}

block，设置包含此数据的状态。然后可以在渲染中使用该状态。此.setState将使用新状态重新渲染。