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

Question

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

错误：

TypeError: Cannot read property 'setState' of undefined

在此行中：

        this.setState({ items: response });

法典：

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);
             });
        }

错误

"setState"被删除，但显示其他错误：

此错误：

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 });

我需要在response末尾添加data.