如何解决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中不起作用。
我建议您做一个教程以掌握基础知识。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
