this.setState() 在成功 API 调用方法后不是函数

Question

我知道这个问题已经在这里出现过好几次了，但是 none 的解决方案对我有用。因此，我根据 React 应用程序中的用户输入，通过 fetch 请求调用 iTunes API。最初的 call/submit 工作得很好。但是，当我尝试进行第二次搜索时，我在输入框中输入后立即收到 this.setState is not a function 错误。我已经尝试以所有方法和所有可能的方式绑定 this，但没有成功让它工作。有什么想法吗？

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            query: '',
            artist: null,
            albums: []
        };
        this.handleChange = this.handleChange.bind(this);
        this.getSearchResults = this.getSearchResults.bind(this);
    }

    handleChange(event) {
        this.setState({ query: event.target.value });
    }

    getSearchResults() {
        console.log('query!!! ' + this.state.query);
        const URL_TEMPLATE = "https://itunes.apple.com/search?entity=album&limit=25&term={query}";
        let url = URL_TEMPLATE.replace('{query}', this.state.query);
        fetch(url)
            .then((response) => {
                let data = response.json();
                return data;
            })
            .then((data) => {
                console.log(data.results);
                this.setState ({
                    albums: data.results
                });
            })
            .catch((err) => {
                console.log(err);
            });

        this.setState({ query: '' });
    }

    render() {
        return (
            <div className="container">
                <hr />
                <div className="col-lg-6">
                    <div className="input-group">
                        <input type="text"
                            value={this.state.query}
                            onChange={this.handleChange}
                            className="form-control" placeholder="Search for..." />
                        <span className="input-group-btn">
                            <button
                                onClick={() => this.getSearchResults()}
                                className="btn btn-default" type="button">Go
                            </button>
                        </span>
                    </div>
                </div>
                <hr />
                <div>
                    Albums: {this.state.albums}
                </div>
            </div>
        );
    }}

编辑： 我应该提一下，它给了我关于 handleChange() 方法的错误，因为这就是处理输入的原因。

Answer 1

我想因为你在闭包里面，所以 this 在

里面不可用

.then((data) => {
    console.log(data.results);
       this.setState = {
       albums: data.results
    };
})

尝试在 fetch 调用之外和之前分配 let that = this。

然后

.then((data) => {
    console.log(data.results);
    that.setState = {
       albums: data.results
    };
})

Answer 2

箭头功能有用吗？

<input type="text"
       value={this.state.query}
       onChange={(e) => this.handleChange(e)}
       className="form-control" placeholder="Search for..." />

而且你不能这样调用 setState():

this.setState = {
   albums: data.results
};

请改为：

this.setState({
   albums: data.results
});

Answer 3

这是完整的工作代码

import React from 'react';
class TestJS extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            query: '',
            artist: null,
            albums: []
        };
        this.handleChange = this.handleChange.bind(this);
        this.getSearchResults = this.getSearchResults.bind(this);
    }

    handleChange(event) {
        this.setState({ query: event.target.value });
    }

    getSearchResults() {
        console.log('query!!! ' + this.state.query);
        const URL_TEMPLATE = "https://itunes.apple.com/search?entity=album&limit=25&term={query}";
        let url = URL_TEMPLATE.replace('{query}', this.state.query);
        fetch(url)
            .then((response) => {
                let data = response.json();
                return data;
            })
            .then((data) => {
                console.log(data.results);
                this.setState({
                    albums: data.results
                });
            })
            .catch((err) => {
                console.log(err);
            });

        this.setState({ query: '' });
    }

    render() {
        let plus5 = [];
        if(!!this.state.albums && this.state.albums.length > 0){
            this.state.albums.map((val, i, arr) => {
                plus5.push(<div key={i}>{val.artistId}</div>);
            });
        }
        return (
            <div className="container">
                <hr />
                <div className="col-lg-6">
                    <div className="input-group">
                        <input type="text"
                               value={this.state.query}
                               onChange={(e) => this.handleChange(e)}
                               className="form-control" placeholder="Search for..." />
                        <span className="input-group-btn">
                            <button
                                onClick={() => this.getSearchResults()}
                                className="btn btn-default" type="button">Go
                            </button>
                        </span>
                    </div>
                </div>
                <hr />
                <div>
                    {plus5}
                </div>
            </div>
        );
    }
}

export default TestJS;

我刚刚渲染了 artistId。你可以渲染任何你想要的东西

谢谢！

this.setState() 在成功 API 调用方法后不是函数

this.setState() not a function after successful API call method

html

javascript

jsx

reactjs

fetch-api