Question

当我使用Axios和Reactjs显示数据库中的所有项目时，如果我通过控制台显示它，如果它显示它们，但是如果我想在视图中显示不允许我我收到了一个错误。

ERROR：

TypeError: Cannot read property 'setState' of undefined

在这一行：

        this.setState({ items: response });

CODE：

export default class Body extends Component{
        constructor(props) {
            super(props)
            this.state = {items: [], item: '' }
            this.updateItems = this.updateItems.bind(this);
            this.handleSubmit = this.handleSubmit.bind(this);
        }

        loadItems() {

            axios.get('/api/v1/items.json')
                .then(function (response) {
                this.setState({ items: response });
             })
                .catch(function (error) {
                console.log(error);
             });
        }

        handleSubmit(item) {
            var newState = this.state.items;
            newState.push(item);
            this.setState({ items: newState })
        }

        handleDelete(id) {
            $.ajax({
                url: `/api/v1/items/${id}`,
                type: 'DELETE',
                success:() => {
                    this.removeItemClient(id);
                }
            });
        }

        removeItemClient(id) {
            var newItems = this.state.items.filter((item) => {
                return item.id != id;
        });

        this.setState({ items: newItems });
        }

        handleUpdate(item) {
            $.ajax({
                    url: `/api/v1/items/${item.id}`,
                    type: 'PUT',
                    data: { item: item },
                    success: () => {
                        this.updateItems(item);
                    }
            }
        )}

        updateItems(item) {
            var items = this.state.items.filter((i) => { return i.id != item.id });
            items.push(item);
            this.setState({items: items });
        }

        render() {
            if(this.state.items.length < 1)
            this.loadItems();
            return (
                <div>
                    <NewItem handleSubmit={this.handleSubmit}/>
                    <AllItems  items={this.state.items}  handleDelete={this.handleDelete.bind(this)} onUpdate={this.handleUpdate.bind(this)}/>
                </div>
            )
        }
}

但如果我将此metod修改为此形式：

loadItems() {
            //var self = this;
            //self.setState
            axios.get('/api/v1/items.json')
                .then(function (response) {
                this.setState({ items: response });
             }.bind(this))
                .catch(function (error) {
                console.log(error);
             });
        }

错误＆＃39; setState＆＃39;被删除，但显示其他错误：

此错误：

TypeError: this.props.items.map is not a function

在这一行：

var items= this.props.items.map((item) => {

这是当前行的代码：

export default class AllItems extends Component{
    constructor(props){
        super(props);
        this.onUpdate = this.onUpdate.bind(this);
    }
     handleDelete(id) {
        this.props.handleDelete(id);
    }

    onUpdate(item) {
        this.props.onUpdate(item);
    }

    render() {
            var items= this.props.items.map((item) => {
                return (
                    <div key={item.id}>
                        <Item item={item}
                              handleDelete={this.handleDelete.bind(this, item.id)}
                              handleUpdate={this.onUpdate}/>
                    </div>
                )
            });

        return(
            <div>
                {items}
            </div>
        )
    }
}

Answer 1

变化：

.then(function (response) {
    this.setState({ items: response });
})

到

.then( (response) => {
    this.setState({ items: response });
})

否则，函数会引用调用者而不是您期望的内容。

读取胖箭头或箭头功能。

Answer 2

loadItems() {
            //var self = this;
            //self.setState
            axios.get('/api/v1/items.json')
                .then(function (response) {
                this.setState({ items: response.data });
             }.bind(this))
                .catch(function (error) {
                console.log(error);
             });
        }

此行是解决错误的答案。

this.setState({ items: response.data });

我需要在data结束时添加response。

无法读取属性＆＃39; setState＆＃39;和TypeError：this.props.items.map不是Axios和Reactjs的函数

2 个答案: