Asp.net mvc ReactJs-访问onclick事件中的状态

我有下面的.jsx文件，试图在delete超链接的onclick事件中访问state对象上的空缺属性，但继续获取

“无法读取未定义的属性‘空缺’错误”

class.Component{
建造师（道具）{
超级（道具）；
this.state={空缺：[]，加载：true}；
获取（'/api/空缺/空缺'）
.then（response=>response.json（））
。然后（数据=>{
this.setState（{空缺：数据，加载：false}）；
});
//this.handleDelete=this.handleDelete.bind（this）；//如果取消注释，则抛出-无法读取未定义的属性“bind”
}
静态handleDelete（id）{
调试器；
var auffaces=this.state.auffaces；//无法读取未定义的属性'auffaces'
}
职位空缺（空缺）{
返回(
标题
最低工资
最高工资
{空缺.map（v=>
{v.title}
{v.货币}{v.货币}
{v.currency}{v.maxSalary}
)}
);
}
render（）{
让内容=this.state.loading
加载

：空缺。加载空缺（此。状态。空缺）；
返回(
{contents}
);
}
}
const containerElement=document.getElementById（'content'）；
render（，containerElement）；

您已将handleDelete声明为静态方法，因此handleDelete在实例上永远不可用

你可以把它当作

handleDelete = ()=>{//write the handling here}

或

---

您已将handleDelete声明为静态方法，因此handleDelete在实例上永远不可用

你可以把它当作

handleDelete = ()=>{//write the handling here}

或

const dd=[
{
“id”：1，
“职务”：“空缺1”，
“货币”：“$”，
“minSalary”：1000，
“最高工资”：10000
},
{
“id”：2，
“职务”：“空缺2”，
“货币”：“$”，
“minSalary”：2000年，
“最高工资”：20000
},
{
“id”：3，
“职务”：“空缺3”，
“货币”：“$”，
“minSalary”：3000，
“最高工资”：30000
},
{
“id”：4，
“职务”：“空缺4”，
“货币”：“$”，
“minSalary”：4000，
“最高工资”：40000
},
]
类。组件{
建造师（道具）{
超级（道具）；
this.state={空缺：dd，加载：true}；
}
handleDelete=（id）=>{
调试器；
控制台日志（id）
让空缺=this.state.dispositions；
}
render（）{
设loadungaments=[]；
让空缺=this.state.dispositions；
推(
标题
最低工资
最高工资
{空缺.map（v=>
{v.title}
{v.货币}{v.货币}
{v.currency}{v.maxSalary}
)}
)
让contents=this.state.loading？loadOffices:“”；
返回(
{contents}
);
}
}

const dd=[
{
“id”：1，
“职务”：“空缺1”，
“货币”：“$”，
“minSalary”：1000，
“最高工资”：10000
},
{
“id”：2，
“职务”：“空缺2”，
“货币”：“$”，
“minSalary”：2000年，
“最高工资”：20000
},
{
“id”：3，
“职务”：“空缺3”，
“货币”：“$”，
“minSalary”：3000，
“最高工资”：30000
},
{
“id”：4，
“职务”：“空缺4”，
“货币”：“$”，
“minSalary”：4000，
“最高工资”：40000
},
]
类。组件{
建造师（道具）{
超级（道具）；
this.state={空缺：dd，加载：true}；
}
handleDelete=（id）=>{
调试器；
控制台日志（id）
让空缺=this.state.dispositions；
}
render（）{
设loadungaments=[]；
让空缺=this.state.dispositions；
推(
标题
最低工资
最高工资
{空缺.map（v=>
{v.title}
{v.货币}{v.货币}
{v.currency}{v.maxSalary}
)}
)
让contents=this.state.loading？loadOffices:“”；
返回(
{contents}
);
}
}

在render中从handleDelete和LoadSpaces声明中删除关键字static，更改为this.LoadSpaces

类。组件{

    constructor(props) {

        super(props);
        this.state = { vacancies: [], loading: true };

        fetch('/api/Vacancy/Vacancies')
            .then(response => response.json())
            .then(data => {
                this.setState({ vacancies: data, loading: false });
            });

        //this.handleDelete = this.handleDelete.bind(this);//If uncomment, throws - Cannot read property 'bind' of undefined

    }

    handleDelete(id) {

        debugger;
        var vacancies = this.state.vacancies;//Cannot read property 'vacancies' of undefined

    }

    loadVacancies(vacancies) {
        return (
            <table className='table table-striped'>
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Min Salary</th>
                        <th>Max Salary</th>
                    </tr>
                </thead>
                <tbody>
                    {vacancies.map(v =>
                        <tr key={v.id}>
                            <td>{v.title}</td>
                            <td>{v.currency} {v.minSalary}</td>
                            <td>{v.currency} {v.maxSalary}</td>
                            <td>
                                <a href="#" onClick={(id) => this.handleDelete(v.id)}>Delete</a>
                            </td>
                        </tr>
                    )}
                </tbody>
            </table>
        );
    }

    render() {

        let contents = this.state.loading
            ? <p><em>Loading...</em></p>
            : this.loadVacancies(this.state.vacancies);

        return (
            <div>
                {contents}
            </div>
        );
    }
}

const containerElement = document.getElementById('content');
ReactDOM.render(<Vacancy />, containerElement);

构造函数（道具）{
超级（道具）；
this.state={空缺：[]，加载：true}；
获取（'/api/空缺/空缺'）
.then（response=>response.json（））
。然后（数据=>{
this.setState（{空缺：数据，加载：false}）；
});
//this.handleDelete=this.handleDelete.bind（this）；//如果取消注释，则抛出-无法读取未定义的属性“bind”
}
handleDelete（id）{
调试器；
var auffaces=this.state.auffaces；//无法读取未定义的属性'auffaces'
}
职位空缺（空缺）{
返回(
标题
最低工资
最高工资
{空缺.map（v=>
{v.title}
{v.c
const dd = [
  {
    "id": 1,
    "title": "Vacancy 1",
    "currency": "$",
    "minSalary": 1000,
    "maxSalary": 10000
  },
  {
    "id": 2,
    "title": "Vacancy 2",
    "currency": "$",
    "minSalary": 2000,
    "maxSalary": 20000
  },
  {
    "id": 3,
    "title": "Vacancy 3",
    "currency": "$",
    "minSalary": 3000,
    "maxSalary": 30000
  },
  {
    "id": 4,
    "title": "Vacancy 4",
    "currency": "$",
    "minSalary": 4000,
    "maxSalary": 40000
  },
]

class Vacancy extends React.Component {
  constructor(props) {
    super(props);
    this.state = { vacancies: dd, loading: true };
  }

  handleDelete = (id) => {
    debugger;
    console.log(id)
    let vacancies = this.state.vacancies;
  }



  render() {
    let loadVacancies = [];
    let vacancies = this.state.vacancies;

    loadVacancies.push(
      <table className='table table-striped'>
        <thead>
          <tr>
            <th>Title</th>
            <th>Min Salary</th>
            <th>Max Salary</th>
          </tr>
        </thead>
        <tbody>
          {vacancies.map(v =>
            <tr key={v.id}>
              <td>{v.title}</td>
              <td>{v.currency} {v.minSalary}</td>
              <td>{v.currency} {v.maxSalary}</td>
              <td>
                <a href="#" onClick={(id) => this.handleDelete(v.id)}>Delete</a>
              </td>
            </tr>
          )}
        </tbody>
      </table>
    )

    let contents = this.state.loading ? loadVacancies  : "";

    return (
      <div>
        {contents}
      </div>
    );
  }
}

    constructor(props) {

        super(props);
        this.state = { vacancies: [], loading: true };

        fetch('/api/Vacancy/Vacancies')
            .then(response => response.json())
            .then(data => {
                this.setState({ vacancies: data, loading: false });
            });

        //this.handleDelete = this.handleDelete.bind(this);//If uncomment, throws - Cannot read property 'bind' of undefined

    }

    handleDelete(id) {

        debugger;
        var vacancies = this.state.vacancies;//Cannot read property 'vacancies' of undefined

    }

    loadVacancies(vacancies) {
        return (
            <table className='table table-striped'>
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Min Salary</th>
                        <th>Max Salary</th>
                    </tr>
                </thead>
                <tbody>
                    {vacancies.map(v =>
                        <tr key={v.id}>
                            <td>{v.title}</td>
                            <td>{v.currency} {v.minSalary}</td>
                            <td>{v.currency} {v.maxSalary}</td>
                            <td>
                                <a href="#" onClick={(id) => this.handleDelete(v.id)}>Delete</a>
                            </td>
                        </tr>
                    )}
                </tbody>
            </table>
        );
    }

    render() {

        let contents = this.state.loading
            ? <p><em>Loading...</em></p>
            : this.loadVacancies(this.state.vacancies);

        return (
            <div>
                {contents}
            </div>
        );
    }
}

const containerElement = document.getElementById('content');
ReactDOM.render(<Vacancy />, containerElement);