Question

我知道，这个问题在这里出现了很多次，但没有一个解决方案对我有用。所以，我根据React应用程序中的用户输入，使用fetch请求调用iTunes API。最初的通话/提交工作正常。但是，当我尝试进行第二次搜索时，只要输入输入框，就会出现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

箭头功能有效吗？

<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 2

这是完整的工作代码

＆＃13;

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;

＆＃13;

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

谢谢！

Answer 3

我认为既然你在关闭内，this在

中不可用

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

尝试在let that = this来电之前和之前分配fetch。

然后

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

成功的API调用方法后，this.setState（）不是函数

3 个答案: