Reactjs 无法引用react'；这'；事件处理程序中的from fetch（）回调

无法将此.setState（）与fetch（）响应一起删除

表单提交事件处理程序中没有fetch（），但无法从fetch（）回调设置状态

TypeError:无法读取未定义的属性“setState”

    ...
    constructor(props) {
        super(props);
        this.state = { deviceName: '', devices: [] };
        this.handleChange = this.handleChange.bind(this);
        this.handleSearchDevice = this.handleSearchDevice.bind(this);
    }

    componentWillMount() {
        this.setState({
            devices: this.props.devices
        });
    }

    componentDidMount() {
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            devices: nextProps.devices
        });
    }

    handleChange(event) {
        this.setState({deviceName: event.target.value });
    }
    handleSearchDevice(event) {
        console.log('Searching '+this.state.deviceName)
        event.preventDefault();

        //Get data from API
        const url = 'device/name'
        const data = { deviceName:this.state.deviceName}
        fetch(url, { method: 'POST',
            body: JSON.stringify(data),
            headers:{ 'Content-Type': 'application/json' }
        }).then(res => {
            res.json().then(function(data) {
                console.log('API Response: '+JSON.stringify(data))
                try {
                    this.setState({devices: data.resp, deviceName: data.deviceName})
                } catch(err) {
                    console.log('catch ' + err.stack)
                    this.callback1(data)
                }
            });
        }).catch(error => {
            console.error('Error:', error)
        }).then(response => {
            console.log('Success:', response)
        });
    }
    callback1(data) {
        this.setState({devices: data.resp, deviceName: data.deviceName})
        console.log(data)
    }

    render() {
        ...
    }

    componentDidUpdate(prevProps) {
    }

    ...

我希望通过事件处理程序中的回调设置状态

---

这是因为您没有将函数

callback1

绑定到

this

。因此，在构造函数中，应该像绑定其他函数一样绑定它

另一种方法是将

callback1

改为箭头函数，这样就不必绑定它。看起来是这样的：

callback1 = () => {
    this.setState({devices: data.resp, deviceName: data.deviceName})
    console.log(data)
}

---

这是因为您没有将函数

callback1

绑定到

this

。因此，在构造函数中，应该像绑定其他函数一样绑定它

另一种方法是将

callback1

改为箭头函数，这样就不必绑定它。看起来是这样的：

callback1 = () => {
    this.setState({devices: data.resp, deviceName: data.deviceName})
    console.log(data)
}

---

可能的重复：可能的重复：那起作用了。非常感谢@applepeaperson给出了清晰的答案``res.json（）。然后（（数据）=>{console.log（'API Response:'+json.stringify（data））尝试{this.setState（{devices:data.resp，deviceName:data.deviceName}）`，效果很好。非常感谢@applepeaperson给出了清晰的答案``res.json（）。然后（（数据）=>{console.log（'API响应：'+JSON.stringify（数据））尝试{this.setState（{devices:data.resp，deviceName:data.deviceName}）```