javascript - 尝试在我的 React 项目中设置状态时无法读取未定义的属性 setState

Question

我尝试从 API 获取数据并通过 setState 方法将其设置为状态，但收到错误:

TypeError: Cannot read property 'setState' of undefined at products.jsx:263

代码是:

getDetails () {    
    var subjectfinal = [];
    let relatedsub = JSON.parse(subjects.related_subjects);
    relatedsub.forEach(function(item, index) {
        let formData = new FormData();
        formData.append("subject_id", item.value);
        fetch("https://***********/get_subject", {
            method: "POST",
            body: formData
        })
        .then(response => response.json())
        .then(responseJson => {
            subjectfinal.push(responseJson[0])
            console.log(subjectfinal) //gives me the subject data i,e array contaning 3 objects in it
            this.setState({ subjectstobedisplayed: subjectfinal }),()=>console.log(this.state.subjectstobedisplayed)) // gives error
            )
        })
        .catch(error => {
            swal("Warning!", "Check your network!", "warning");
            console.log(error);
        });
    });
};

我想问如果console.log(subjectfinal)我获取了所有数据，那么为什么在设置状态时它会给我错误？

Answer 1

有两种解决方案，

将 getDetails 函数定义更改为箭头函数语法

getDetails = () =>  {
  ... all the above code
}    

或者在构造函数中，将其绑定(bind)到 getDetails 函数

this.getDetails = this.getDetails.bind(this);