Javascript TypeError:无法分解属性'；jobArray'；属于'；react_u_u网页u导入u模块u 0_uu.state'；因为它是未定义的

我在一个工作场所工作了几个星期。我还没有反应过来。除了这一页用于显示作业外，每个页面都工作正常（登录、注册等）。我在编译时遇到的错误就是这个问题的标题。而且，控制台日志根本不起作用

正如你所看到的，我尝试过添加硬编码数据之类的所有方法，但没有任何效果。后端代码工作正常

const token = getCookie('token');
const jobArray = ["dalas nalgas"];

class JobListClass extends React.Component {

  state = { jobArray };

  componentDidMount() {
    !isAuth()? navigator.goTo("/") : this.load();
  }

  load = async () => {
    try {
      const response = axios({
        method: 'GET',
        url: process.env.REACT_APP_API+'/jobs'
      })
      console.log("response data:"+response.data);
      this.setValues({jobArray : response.data});
      //console.log("jobarray with data:" +jobArray);
    }
    catch(err) {
      toast.error("No info has been retrieved.");
    }
  };

    listJobs = () => {
        const {jobArray} = state;
        console.log("array:"+jobArray);
            const array = jobArray.map((job, index) => {
        return (
        <div key={index}>
            <h5 className="card-title">{ job.enterprise_name }</h5>
            <p className="card-text">{ job.pos }</p>
            <p className="card-text">{ job.desc }</p>
            <p className="card-text">{ job.salary } USD per week.</p>
            <p className="card-text">{ job.hours } per day.</p>                    

            { isAuth() && isAuth().role === 'admin' ?
            <div>
                <Link to={"jobs/update/" + job._id} className="btn btn-primary">Update</Link>
                <button onClick={ this.showDetails }>Show</button>
            </div>
            : null }
        </div>
    )
    });
    return array;
  };

const-token=getCookie（'token'）；
const jobArray=[“dalas nalgas”]；
类JobListClass扩展了React.Component{
状态={jobArray}；
componentDidMount（）{
！isAuth（）？navigator.goTo（“/”）：this.load（）；
}
load=async（）=>{
试一试{
常数响应=axios({
方法：“GET”，
url:process.env.REACT_APP_API+'/jobs'
})
日志（“响应数据：”+response.data）；
this.setValues（{jobArray:response.data}）；
//log（“包含数据的jobarray:+jobarray”）；
}
捕捉（错误）{
错误（“没有检索到任何信息”）；
}
};
listJobs=（）=>{
const{jobArray}=状态；
log（“数组：+jobArray”）；
常量数组=jobArray.map（（作业，索引）=>{
返回(
{job.enterprise_name}
{job.pos}
{job.desc}
{job.salary}美元/周
每天{p className=“card text”>{job.hours}。

{isAuth（）&&isAuth（）。角色=='admin'？
使现代化
显示
：null}
)
});
返回数组；
};

我会让您轻松完成这项工作

第一个是为什么在顶部定义<代码>作业数组< /C>作为Const。const。它们的值一旦定义就不能改变。在代码的中间也将状态变量设为相同的const。因此，如何反应应该是哪一个应该被分解。

因为React是一个库，所以我不能这样说。但你必须遵循最佳实践。与其将状态保存在类中，不如像这样将其保存在构造函数中。如果你是编程新手，请搜索什么是构造函数以及我们为什么使用它

再次回到回答，你可以这样做

constrcutor(){
 super();
 this.state={
  jobArray:[]
 }
}

之后，必须在构造函数中绑定数据检索方法。 因此，您可以像以前那样分解jobArray

const{jobArray}=state；

当您在listJobs（）方法中生成JSX模板时，您没有处理处理空数组的情况

const array = jobArray|| jobArray.map((job, index) => {

---

我看不出你在哪里呈现你所有的JSX模板，以及它将如何返回。所以也要仔细研究一下。通常，如果它是一个基于类的UI组件，它应该呈现（）方法，并在其返回中返回JSX。完成该部分并确保导出类组件。这样您就可以毫无问题地使用它。

请澄清什么不起作用：您得到了什么错误，什么失败了，您期望的行为是什么，以及您得到的结果是什么。jobArray不起作用。它s始终未定义，尽管我硬编码了一个文本，React仍然无法映射数组。jobArray应该保存从API/jobs url获取的response.data。它包含企业名称、职位、描述、工时和工资。我应该存储response.data，然后使用该数据在列表中显示，然后从该列表中，从ID中，获取单个作业的数据，并使用模式显示。我本打算发布整个代码，但Stackoverflow不让我这么做。请阅读-总结是，这不是一种理想的方式来称呼志愿者，可能会对获得答案产生反作用。请不要将此添加到您的问题中。您好，还有非常感谢您的回答。回答您关于我为什么使用const的问题…基本上，我看了一个教程，这个家伙在定义变量时使用了const，所以我想到了使用它的方法…我在顶部评论了

const jobArray

的定义和

state={jobArray}

。我使用了构造函数，但问题仍然存在。我缺少什么？顺便说一下，我将

render（）方法中的listJobs方法调用为
this.listJobs（）
我不知道这是否会引起一些噪音？可能不会。呃，很抱歉，问题作者的帐户已经被删除，发布问题大约三个小时后。我不知道为什么。