ReactJS：如何呈现对象集合

问题描述

所以最近几天我在Web开发方面还很陌生。我来自c ++背景，我无法完全理解reactjs的所有原理。我有2节课。称为JobAd的子类应呈现从道具获得的一些信息。

export default class JobAd extends Component {
    constructor(props) {
        super(props);
        this.state ={
            index: props.index,id: props.jobId,name: props.name,description: props.description,location: props.location,adress: props.adress,alreadyApplied: props.alreadyApplied,open: false,// toggleJob: props.toggleJob,};
        this.toggleJob = props.toggleJob;
    }
    
    render() {
        return (
            <div className={`${styles.jobAd} d-flex` + "job " + (this.state.open ? 'open': '')} key={this.state.index} onClick={() => this.toggleJob(this.state.index)}>
                <div className={`${styles.jobTitle}`}>
                   {this.state.location} - {this.state.name}  
                </div>
                <div className={`${styles.jobDetails}`}>
                    <div className={`${styles.jobDescription}`}> {this.state.description}</div>
                    <div className={`${styles.jobAdress}`}>{this.state.adress}</div>
                    <ApplyButton jobId= {this.props.id} alreadyApplied = {this.props.alreadyApplied}/>
                </div>
            </div>
        )
    }
}

第二个类，查询mongoDB数据库，并创建jobAd对象，该对象将根据从数据库中获取的信息进行填充。

class JobExplorer extends React.Component
{
...

result.data.jobs.forEach(job => {
              var find = job.employees.find(obj => obj === userId);

              if (!(find === undefined)) {
                alreadyApplied = true;
              }


              var toPush = new JobAd  ({
                index: i,id:job._id,description:job.description,name:job.name,location:job.locationName,adress:job.locationAdress,alreadyApplied:alreadyApplied,open:false,toggleJob: this.toggleJob.bind(this)
              });
              jobList2.push(toPush);
              console.log("look");
              console.log(jobList2) 
              });
             
            
            this.setState({
              jobList: jobList2
            })


            this.setState({
              error: null,jobs: result.data.jobs
            });
...

render()
      {
              console.log("look2");
        
        console.log(this.state.jobList);
        return (
          <div><Navigation /> 
                                        {this.state.jobList}
          </div>
          );
      }

但是我遇到以下错误，无法找到修复程序。

错误：对象作为React子对象无效（找到：带有键{props，context，refs，updater，state，toggleJob}的对象）。如果要渲染子级集合，请改用数组。

我应该如何实例化那些对象，以便可以使用我编写的“体系结构”来渲染它们。我的课堂上有基本缺陷吗？

解决方法

以下代码段无效，因为<properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <userdefvariable></userdefvariable> // variable that you want to pass along </properties> <build> <resources> <resource> <directory>src/main/resource</directory> // path to the file (can be anything) <filtering>true</filtering> // must be true this is what does replacement </resource> </resources> </build>将返回new而不是react组件。

所以，而不是

object (this)

您可以做到

var toPush = new JobAd({
    index: i,id: job._id,...
});
jobList2.push(toPush);

上面的代码段起作用是因为var toPush = <JobAd index={i} id={job._id} ... />;被转换为<JobAd ... />。但是，您仍然不应该这样。因为有很多更好的方法可以做到这一点。其中之一是：

仅将数据保存在React.createElement(JobAd,... )中，然后在joblist组件上呈现数据列表

如下所示：-

JobAd

关键是非常重要的事情。进一步了解：https://reactjs.org/docs/lists-and-keys.html

有待改进的地方：-

不要像在render(){ return this.state.joblist.map((job,i) => ( <JobAd key={job._id} index={i} ... /> )); }类中那样在状态下复制道具，而是直接渲染道具。
不要像JobAd那样两次调用setState。您可以在其中设置所有键 JobExplorer同时进行。因为那样会两次渲染该组件。

建议：-

您应避免使用setState，因为这可能会引起一些问题。
由于您只是一个入门者，请首先尝试使用功能组件。他们是相当容易掌握

您似乎对React和Web开发中的状态/属性有误解。这很正常；我是首先学习python和Java的，许多教程似乎都假设人们已经知道这一点。

“状态”通常是指包含/引用无需更改应用程序中的页面即可更改的值的变量。如果您知道某个值不会改变，则无需保持其状态。将其存储在普通变量中正是您应该做的。

“ Props”只是传递给React组件的参数的代名词。现实中还有很多其他功能，但是作为一个初学者，这就是您现在真正需要知道的。

因此，在您的工作中添加名称，地址，工作，描述之类的内容不应处于状态，因为它们不会由于用户交互或任何其他原因而改变，除非它们是基础数据从更改中加载，但是那不会由React处理，而是由您的应用从中获取数据的API处理。它们应该只是被渲染，所以在您的render方法中像this.props.address一样引用它们。但是，open的值必须处于状态，因为这肯定可以更改。

对于错误，您似乎没有正确调用JobAd。您需要使用语法<Job Ad/>而不是new JobAd ...在React中不起作用。

我建议您做一个教程以掌握基础知识。

reactjs reactjs