在 React 中更改 API Fetch OnClick

在 React 应用中，我们想要获取外部数据或资源时通常会使用 API。我们可以使用 fetch() 方法去获取数据，这个方法是标准 JavaScript 里的 API。

在这个例子中，我们将利用 fetch() 方法从一个服务器请求数据并在点击按钮时动态获取数据。我们还将利用内部 React 内置的方法将数据显示在应用中。

代码实现步骤

Step 1: 在 React 程序中添加一个按钮并在 onClick 事件中执行一个函数。

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            data: null,
        }
    }

    handleClick() {
        // 执行获取数据的函数
    }

    render() {
        return (
            <div>
                <button onClick={this.handleClick.bind(this)}>获取数据</button>
            </div>
        )
    }
}

在这个例子中，我们将在函数中设置数据的状态。

Step 2: 在获取数据的函数中添加 API Fetch。

handleClick() {
    fetch('https://jsonplaceholder.typicode.com/todos/1')
        .then(response => response.json())
        .then(json => this.setState({ data: json }));
}

在这里，我们只是简单地获取了示例数据。在真实的应用中，您将在 URL 中传递参数。

使用 response.json() 方法将获取到的数据转换为 JSON 格式。最后，我们将数据保存在 React 内部的状态中。

Step 3: 在 React 页面上渲染获取到的数据。

render() {
    if (this.state.data) {
        return (
            <div>
                <button onClick={this.handleClick.bind(this)}>获取数据</button>

                <div className="data">
                    <h1>{this.state.data.title}</h1>
                    <p>{this.state.data.body}</p>
                </div>
            </div>
        )
    } else {
        return (
            <div>
                <button onClick={this.handleClick.bind(this)}>获取数据</button>
            </div>
        )
    }
}

在这个例子中，我们使用条件渲染，如果有数据就渲染出来，否则就不渲染。

结论

以上就是使用 API Fetch 在 React 中获取数据和将其呈现在页面上的方法。这是一个简单而实用的例子，您可以将其用于您的实际项目当中。

如果您还不熟悉 React，请查看 React 的文档和相关教程以了解更多信息。

附录:

完整代码片段如下:

import React from 'react';

export default class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            data: null,
        }
    }

    handleClick() {
        fetch('https://jsonplaceholder.typicode.com/todos/1')
            .then(response => response.json())
            .then(json => this.setState({ data: json }));
    }

    render() {
        if (this.state.data) {
            return (
                <div>
                    <button onClick={this.handleClick.bind(this)}>获取数据</button>

                    <div className="data">
                        <h1>{this.state.data.title}</h1>
                        <p>{this.state.data.body}</p>
                    </div>
                </div>
            )
        } else {
            return (
                <div>
                    <button onClick={this.handleClick.bind(this)}>获取数据</button>
                </div>
            )
        }
    }
}

代码中使用的 API 是 JSON Placeholder，这是一个免费测试 JSON 和 REST API 的在线服务。