Question

我已经在工作现场工作了几个星期。我还是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;
  };

Answer 1

我将为您简化这项工作。

首先是为什么要在顶部将jobArray定义为const。 const是const。一旦定义，它们的价值就无法改变。在代码中间，您还可以使状态变量与相同的const相同。因此，如何反应将发现应该对其进行销毁。

由于React是库，所以我不能说以这种方式这样做。但是您必须遵循最佳实践。与其将状态保存在类中，不如将其保存在构造函数中是很好的。如果您不熟悉编程，请搜索什么是构造函数以及为什么使用它。

再次回答您可以这样做，

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

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

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

我看不到您在哪里渲染所有JSX模板以及它如何返回。所以也要研究一下。通常，如果它是一个基于类的UI组件，则它必须具有render（）方法，并且在返回JSX的返回内部。完成该部分，并确保导出您的类组件。因此您可以毫无问题地使用它。

TypeError：无法解构“ react__WEBPACK_IMPORTED_MODULE_0 __。state”的属性“ jobArray”，因为该属性未定义

1 个答案: