时间戳

首页 > 解决方案 > TypeError：无法解构“react__WEBPACK_IMPORTED_MODULE_0__.state”的属性“jobArray”，因为它未定义

javascript - TypeError：无法解构“react__WEBPACK_IMPORTED_MODULE_0__.state”的属性“jobArray”，因为它未定义

问题描述

我已经在一个工作网站上工作了几个星期。我对 React 还是很陌生。除了这个用于显示工作的页面外，每个页面都运行良好（登录、注册等）。我在编译时得到的错误是这个问题的标题。此外，控制台日志根本不起作用。

如您所见，我已经尝试了所有方法，例如添加硬编码数据，但没有任何效果。后端代码工作正常。

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

标签： javascriptreactjs

解决方案

我会让你轻松完成这项工作。

首先是为什么你jobArray在顶部定义为 const 。常量是常量。他们的价值观一旦定义就不能改变。在代码中间，您还可以将状态变量设置为相同的 const。那么 react 将如何找到它应该解构的那个。

由于 React 是一个库，我不能说以这种方式和这种方式来做这件事。但是您必须遵循最佳实践。与其将状态保存在类中，不如将其保存在这样的构造函数中。如果您是编程新手，请搜索什么是构造函数以及我们使用它的原因。

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

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

在您必须在构造函数中绑定数据检索方法之后。因此，您可以像const {jobArray} = state; 在 listJobs() 方法中生成 JSX 模板时一样解构 jobArray ，您没有处理处理空数组的情况。为此，您可以像这样替换，

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

而且我看不到你在哪里渲染你所有的 JSX 模板以及它会如何返回。所以也调查一下。通常，如果它是一个基于类的 UI 组件，它应该有 render() 方法并在它的 return 中返回 JSX。完成该部分并确保导出您的类组件。所以你可以毫无问题地使用它。

推荐阅读